三句话就搞懂！CSS选取器的优先级计算办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当CSS属性的效果互相抵触时，就<span style="color: black;">必须</span>计算CSS<span style="color: black;">选取</span>器的优先级。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>，<span style="color: black;">咱们</span>给选CSS择器<span style="color: black;">归类</span>：</p>行内样式 <div style="xxx"></div> ==> 标记a类ID <span style="color: black;">选取</span>器 ==> 标记b类类，属性<span style="color: black;">选取</span>器和伪类<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;">**计数<span style="color: black;">办法</span>：**a/b/c/d类中，<span style="color: black;">显现</span>一类，就给a/b/c/d计一个 次数。a-d从高级到低级，a类的次数高的，其样式权重高，其余bcd类<span style="color: black;">没</span>需再比较；若a类的次数相同，则比较b类，b类的次数高的，其样式高权重高，其余cd类<span style="color: black;">没</span>需再比较。以此类推到d类。（此段一共3个句号，没骗你吧）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">abcd类样式 的计数，举例如下:</p>{}为style的括号，*星号<span style="color: black;">选取</span>器 <span style="color: black;">暗示</span>所有标签
<div style="color: black; text-align: left; margin-bottom: 10px;">*{} //a=0 b=0 c=0 d=0 最弱权重
a:hover{} //a=0 b=0 c=1 d=1
ul ol{} //a=0 b=0 c=0 d= 2
ul ol+li{} //a=0 b=0 c=0 d=3
h1+input{} //a=0 b=0 c=1 d=3 属性<span style="color: black;">选取</span>器
ul ol li.acticce{} //a=0 b=0 c=1 d=3
#ct .box p //a=0 b=1 c=1 d=1
div#header :after{} //a=0 b=1 c=0 d=2 :after伪元素
style="" //a=1 b=0 c=0 d=0</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1 还有 样式覆盖。</p><span style="color: black;">倘若</span><span style="color: black;">以上</span>中有 权重计数相同的样式 相互抵触，谁写在下面（谁最后被写下），谁管用，之前先写的样式都被覆盖 不管用了。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2 <span style="color: black;">以上</span><span style="color: black;">归类</span>是依据CSS<span style="color: black;">选取</span>器本身的优先级，大体上，从高到低 如下。其中 !important 会<span style="color: black;">没</span>视一切，<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;">在属性后面<span style="color: black;">运用</span> !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}<span style="color: black;">做为</span>style属性写在元素标签上的内联样式id<span style="color: black;">选取</span>器类<span style="color: black;">选取</span>器=* 伪类<span style="color: black;">选取</span>器=* 属性<span style="color: black;">选取</span>器标签<span style="color: black;">选取</span>器=*为元素<span style="color: black;">选取</span>器通配符<span style="color: black;">选取</span>器浏览器自定义</p>//直观理解这个<span style="color: black;">次序</span>，<span style="color: black;">亦</span><span style="color: black;">能够</span>猜出来优先级了
期待与你深入交流，共探知识的无穷魅力。
页:
[1]