十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
CSS选择器的类型分为3类:标记选择器、类别选择器和ID选择器。(可能名称有不同的说法,但意思都是一样的)
成都创新互联公司成立于2013年,我们提供高端重庆网站建设、成都网站制作、网站设计、网站定制、营销型网站、成都小程序开发、微信公众号开发、营销推广服务,提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地,为成都塑料袋企业提供源源不断的流量和订单咨询。
标记选择器是利用HTML的标记直接定义标记内容的样式,如:h1{
color:red;
font-size:25pt;}
类别选择器是通常说的class选择器,定义的时候要在名称前加.如:.one{
color:red;
font-size:25pt;}
ID选择器定义的时候要在前面加#,如:#box
{
color:red;
font-size:25pt;}
利用DW写CSS的时候,高级就是上面说的ID选择器,ID选择器的名字可以任意命名,可以自己定义,可是标签就只能是HTML语言里制定的那些标记,不能自己定义。
CSS选择器如下:
1. 标签名选择器 div { color:Red;} /即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
4.后代选择器(类选择器的后代选择器) .divClass span { color:Red;} /即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
选择器的优先级
1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)div style="color:Red;"/div
2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如 .divClass span { color:Red;} 优先级别就是:10+1=11
想详细的话可以参考W3C文档。
CSS选择器就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS选择器分类:
标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器
1、html标签选择器:
定义:以html标签作为选择器
2、class类选择器:
定义:为HTML标签添加class属性,通过类选择器来为具有此class属性的元素设置css样式。
类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则:
同一个元素可以设置多个类,之间用空格隔开:
3、ID选择器
定义:为HTML标签添加ID属性,通过ID选择器来为具有此ID的元素设置CSS规则
4、群组选择器
定义:集体统一设置样式
5、全局选择器
定义:所有标签设置样式
HTML文档结构图
6、后代选择器
定义:使用后代选择器设置,之间用空格隔开,后代选择器可以多层。
7、伪类选择器
链接的四种状态:激活状态,已访问状态,未访问状态,鼠标悬停状态。
伪类
说明
:link
未访问的链接
:visited
已访问的链接
:hover
鼠标悬停状态
:active
激活的链接
:hover 用于访问的鼠标经过某个元素时;
:active 用于一个元素被激活时(即按下鼠标之后放开鼠标之前的状态)
伪类选择器的属性:link visited hover active
说明:
1) a:hover 必须置于 a:link和a:visited之后,才有效
2) a:active 必须置于 a:hover之后才有效
3) 伪类名称对大小写不敏感
8、CSS其它选择器
css继承特性,从父元素那继承部分css属性
选择器的优先级
ID选择优先级最高(id选择器定义具有唯一性)
class选择器次之(class选择器可以多个)
元素选择器再次之
其它选择器优先级主要根据定义的先后顺序,最后定义的优先级高
!important 加重选择器的优先级,添加在样式规则之后,中间用空格隔开。
CSS选择器命名规则
1:采用英文字母,数字以及"-" 和 "_" 命名
2:以小写字母开头,不能以数字和"-" 和 "_" 开头
3:使用有意义的命名规范
常用CSS命名
header
页头
main
主体
footer
页尾
nav
导航
sidebar
侧栏
container
容器
column
栏目
title
标签
menu
菜单
submenu
子菜单
*列举常用命名,大家根据自身项目及团队的规则命名
耐心学习基础知识,基础是盖房的根基,必须打结实。
如果您觉得有用,记得在下方点赞、关注、留言,我会定期奉 上更多的惊喜哦,您的打赏支持才是我继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!
CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。
用法如下:
#id名 { 属性名:属性值; }
.class名 { 属性名:属性值; }
标签名 { 属性名:属性值; }
其中,他们之间又可以以不同的方式进行组合,如下:
后代选择器: 父代名 后代名 { 属性名:属性值; }
子代选择器: 父代名子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }……
常用的也就这些。
纯手打,望采纳。我的百度个人简介里面还有博客网址,想看一些我资料欢迎进入我的博客。