CSS选取器优先级
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>CSS<span style="color: black;">有些</span><span style="color: black;">平常</span><span style="color: black;">选取</span>器</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、标签<span style="color: black;">选取</span>器（元素<span style="color: black;">选取</span>器）</p>eg：body,li,div,span等<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、类<span style="color: black;">选取</span>器（页面中class<span style="color: black;">能够</span>有<span style="color: black;">非常多</span>个）</p>eg：<div class="content"></div><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、id<span style="color: black;">选取</span>器（页面中id只能有一个）</p>eg：<div id="content"></div><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4、通配符选择器：<span style="color: black;">一般</span>用*<span style="color: black;">暗示</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5、后代<span style="color: black;">选取</span>器</p>eg：对header元素下的所有的div写样式，即：header div{color:red;}<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6、子元素<span style="color: black;">选取</span>器</p><span style="color: black;">选取</span>只<span style="color: black;">做为</span> header 元素下一级的 div 元素，即：header > div {color:red;}<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7、伪类<span style="color: black;">选取</span>器</p>eg：<span style="color: black;">选取</span>器:active，用法：a:active；匹配被点击的链接<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>CSS优先级算法（参照CSS2.1算法，不适于CSS3）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、算法</p><span style="color: black;">倘若</span>声明来自一个style属性而不是一条<span style="color: black;">选取</span>器样式规则，算1，否则<span style="color: black;">便是</span>0 (= a)（HTMl中，一个元素的"style"属性值是样式表规则，这些属性<span style="color: black;">无</span><span style="color: black;">选取</span>器，<span style="color: black;">因此</span>a=1，b=0，c=0，d=0）计算<span style="color: black;">选取</span>器中ID属性的数量 (= b)计算<span style="color: black;">选取</span>器中其它属性和伪类的数量 (= c)计算<span style="color: black;">选取</span>器中元素名和伪元素的数量 (= d)总结：从左到右进行比较，大的优先级越高。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、示例</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> #name {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */</p>style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>总结</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、<span style="color: black;">选取</span>器越<span style="color: black;">详细</span>，其优先级越高</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、相同优先级，<span style="color: black;">显现</span>再后面的，覆盖前面的</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、属性后面加!important优先级最高，<span style="color: black;">然则</span>要少用</p>
楼主节操掉了，还不快捡起来！ 感谢您的精彩评论，为我带来了新的思考角度。 楼主节操掉了，还不快捡起来！
页:
[1]