CSS选取器优先级详解
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前言：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于CSS的<span style="color: black;">选取</span>器优先级我在w3school文档中并<span style="color: black;">无</span>看到对应说明，网上比较笼统的说法是:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">“important > 内联 > ID > 类 > 标签 | 伪类 | 属性<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>上在CSS2规范关于<span style="color: black;">详细</span>性(specificity)的定义中，描述是非常<span style="color: black;">知道</span>的，<span style="color: black;">然则</span><span style="color: black;">非常多</span>中文版本的css图书中采 用了10进制的简单相加计算方式（<span style="color: black;">包含</span><span style="color: black;">第1</span>版《CSS权威指南》，第二版中<span style="color: black;">已然</span>纠正）。<span style="color: black;">因此呢</span>把规范中对CSS层叠优先级的<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>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>CSS规范，<span style="color: black;">详细</span>性越<span style="color: black;">知道</span>的样式规则，权重值越高。计算权重值的依据，并不是许多<span style="color: black;">文案</span>所描述的那样“class是10，标签是1，ID是100”之类——虽然<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>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">见代码：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><!DOCTYPE HTML></span>
<span style="color: black;"><</span><span style="color: black;">html</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">style</span> <span style="color: black;">type</span><span style="color: black;">=</span><span style="color: black;">"text/css"</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;">child</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">red</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;">parent</span><span style="color: black;">></span><span style="color: black;">p</span><span style="color: black;">></span><span style="color: black;">h1</span><span style="color: black;">></span><span style="color: black;">span</span><span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">blue</span><span style="color: black;">;</span>
<span style="color: black;">}</span>
<span style="color: black;"></</span><span style="color: black;">style</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">title</span><span style="color: black;">></span>css<span style="color: black;">选取</span>器权值对比<span style="color: black;"></</span><span style="color: black;">title</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">head</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"parent"</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"><</span><span style="color: black;">span</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">></span>css<span style="color: black;">选取</span>器权值对比<span style="color: black;"></</span><span style="color: black;">span</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">h1</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">p</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">div</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">body</span><span style="color: black;">></span>
<span style="color: black;"></</span><span style="color: black;">html</span><span style="color: black;">></span>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">根据</span>之前说法，ID<span style="color: black;">选取</span>器优先级大于子<span style="color: black;">选取</span>器，代码运行结果应该是红色字体。而<span style="color: black;">实质</span>运行结果却为蓝色字体:</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-8fac87b749011c4e04dbdcd248d2cc8b_720w.webp" style="width: 50%; margin-bottom: 20px;"></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;">A：<span style="color: black;">倘若</span>规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. <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>B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">B：计算该<span style="color: black;">选取</span>器中ID的数量。（例如，#header <span style="color: black;">这般</span>的<span style="color: black;">选取</span>器，计算为0, 1, 0, 0）；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">C：计算该<span style="color: black;">选取</span>器中伪类及其它属性的数量（<span style="color: black;">包含</span>class、属性<span style="color: black;">选取</span>器等，不<span style="color: black;">包含</span>伪元素）。 （例如，.logo <span style="color: black;">这般</span>的<span style="color: black;">选取</span>器，计算为0, 0, 2, 0）；</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">D：计算该<span style="color: black;">选取</span>器中伪元素及标签的数量。（例如，p:first-letter <span style="color: black;">这般</span>的<span style="color: black;">选取</span>器，计算为0, 0, 0, 2）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS2规范中给出的<span style="color: black;">有些</span>例子：</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;">h1 + *{} /* </p>
外链论坛的成功举办，是与各位领导、同仁们的关怀和支持分不开的。在此，我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢！ 我完全同意你的观点，说得太对了。 “BS”（鄙视的缩写） 你的努力一定会被看见，相信自己，加油。 感谢楼主分享，祝愿外链论坛越办越好！
页:
[1]