目录
一、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
三、总结
在进行CSS选择器优先级排序的时候,主要依据以下顺序进行:
style(行内样式:1000) > id(ID选择器:100) > class(class选择器:10) > 标签选择器(假设级别为1)
例如以下选择器的优先级从签到后依次为:
style(1000)>#list #box(100+100=200)> #list .box div span(100+10+1+1=112) > .list .box p(10+10+1=21)> .list span(10+1=11)> p:last-child(1)