CSS 有三类选择器:标签选择器、class 选择器、id 选择器。
一、行内样式 > 内部样式 > 外部样式
1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高(就近原则)
可参考博客 https://www.cnblogs.com/lyw-hunnu/p/lyw_cssusage.html
二、id 选择器 > class 选择器 > 标签选择器
<style type="text/css"> div{ color:green; } #idred{ color:red; } .classblue{ color:blue; } </style> <div>CSS 标签选择器</div> <!--绿色--> <div class="classblue">CSS class选择器</div> <!--蓝色--> <div id="idred">CSS id 选择器</div> <!--红色-->
可以看出
class 选择器 > 标签选择器
id 选择器 > 标签选择器
<style type="text/css"> #idred{ color:red; } .classblue{ color:blue; } </style> <div id="idred" class="classblue">CSS id class 选择器</div> <!--红色-->
<style type="text/css"> #idred{ color:red; } .classblue{ color:blue; } </style> <div class="classblue" id="idred">CSS id class 选择器</div> <!--红色-->
上述,调换div 中 class 和 id 的位置,显示结果依旧为 红色,由此可以看出 id 选择器 > class 选择器
因此有,id 选择器 > class 选择器 > 标签选择器
三、对同一个标签选择器
p{ color:green; } p{ color:blue; }
最后这个 p 元素额颜色为 蓝色 。
四、有两个 class 属性值
有以下两种 CSS 样式
第一种 .classblue{ color:blue; } .classyellow{ color:yellow; } 第二种 .classyellow{ color:yellow; } .classblue{ color:blue; }
有以下两种 html 的 div 标签
<div id="classyellow classblue">CSS选择器 黄在前,蓝在后</div> <!--第一种 CSS 样式为黄色,第二种 CSS 样式为 蓝色--> <div class="classblue classyellow">CSS选择器 黄在后,蓝在前</div> <!--第一种 CSS 样式为黄色,第二种 CSS 样式为 蓝色-->
可以看出,当一个元素有两个 class 属性值时,与 class 属性值在元素中定义的位置无关,而是与 CSS 样式设置的位置有关,后者覆盖前者。
五、选择器权值
同一个样式表中:
1. 权值相同,就近原则(离被设置元素跃进优先级越高)
2. 权值不同,根据权值来判断 CSS 样式,那种 CSS 样式权值高,就使用哪种样式。
选择器 | 权值 |
标签选择器 | 1 |
类选择器和伪类 | 10 |
ID 选择器 | 100 |
通配符选择器 | 0 |
行内选择器 | 1000 |
权值规则:
1. 统计不同选择器的个数
2. 每类选择器的个数乘以相应权值
3. 把所有的指相加得出选择器的权值
例如:给下列元素加样式
<div ID="main"> <div> <div class="warning"> <h2>加样式的元素</h2> </div> <div class="test"> <h2>不加样式的元素</h2> </div> </div> </div>
#main div.warning h2{ color:red; } id : 1 class : 1 标签 : 2 1*100=100 1*10=10 2*1=1 权值 : 100 + 10 + 2 =112 #main div h2 { color:yellow; } 权值 : 100 + 2 =102 所以最后加样式的元素 h2 显示的颜色为 红色
六、!important 规则
可调整样式优先级,添加在样式优先级之后,中间用空格隔开
div{ color:red; !important }
看下面的例子:
<style type="text/css"> p{ color:blue !important; } </style> <p color="red">最后显示为蓝色</p>
行内样式的优先级比内部样式的高,但是这里最后显示的颜色却为 红色,这是因为 !important 提高了样式的优先级。