css & 深入理解 css 选取器优先级
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1、什么是<span style="color: black;">选取</span>器优先级？</h3> 浏览器<span style="color: black;">经过</span>优先级来判断<span style="color: black;">那些</span>属性值与一个元素最为<span style="color: black;">关联</span>，从而在该元素上应用这些属性值。优先级是基于<span style="color: black;">区别</span>种类<a style="color: black;"><span style="color: black;">选取</span>器</a><span style="color: black;">构成</span>的匹配规则。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">以上</span>字段定义来自<a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">developer.mozilla.org/z</span><span style="color: black;">h-CN/docs/Web/CSS/Specificity</span></a></p>先抛出个问题，下面例子字体颜色<span style="color: black;">最后</span>是什么颜色，以及<span style="color: black;">为何</span>？<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"item"</span> <span style="color: black;">id</span><span style="color: black;">=</span><span style="color: black;">"item"</span><span style="color: black;">></span>
item
<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;">style</span><span style="color: black;">></span>
<span style="color: black;">#</span><span style="color: black;">item</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">#f00</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;">item</span> <span style="color: black;">{</span>
<span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">#0f0</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;">style</span><span style="color: black;">></span>
</div>
<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;">这就<span style="color: black;">触及</span>到了优先级问题，同<span style="color: black;">一起</span>内容，<span style="color: black;">咱们</span>同时用了 ID<span style="color: black;">选取</span>器 和 类<span style="color: black;">选取</span>器,<span style="color: black;">由于</span> 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>为红色。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2、优先级的计算规则</h3>
<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>器优先级关系是：</p> 内联 > ID<span style="color: black;">选取</span>器 > 类<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;"><span style="color: black;">然则</span>，浏览器<span style="color: black;">详细</span>的优先级算法是<span style="color: black;">怎么样</span>的？可能还有些人不<span style="color: black;">晓得</span>。《CSS Refactoring》中<span style="color: black;">说到</span>了算法的过程 。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">A specificity is determined by plugging numbers into A, B, C, D):</p>If the styles are applied via the style attribute, a=1; otherwise, a=0.B is equal to the number of ID selectors present.C is equal to the number of class selectors, attribute selectors, and pseudoclasses present.D is equal to the number of type selectors and pseudoelements present.<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;">优先级<span style="color: black;">是由于</span> A 、B、C、D 的值来决定的，其中它们的值计算规则如下：</p><span style="color: black;">倘若</span>存在内联样式，<span style="color: black;">那样</span> A = 1, 否则 A = 0;B 的值等于 ID<span style="color: black;">选取</span>器（#id） <span style="color: black;">显现</span>的次数;C 的值等于 类<span style="color: black;">选取</span>器（.class） 和 属性<span style="color: black;">选取</span>器（a[]） 和 伪类（:first-child） <span style="color: black;">显现</span>的总次数;D 的值等于 标签<span style="color: black;">选取</span>器（div,span,a） 和 伪元素（::before,::after） <span style="color: black;">显现</span>的总次数 。<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上理论<span style="color: black;">按照</span>奉上，先上个栗子：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">#name</span> <span style="color: black;">></span> <span style="color: black;">div</span> <span style="color: black;">></span> <span style="color: black;">span</span> <span style="color: black;">></span> <span style="color: black;">a</span><span style="color: black;">.hover</span></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">套用上面的算法，依次求出 A B C D 的值：</p><span style="color: black;">由于</span><span style="color: black;">无</span>内联样式 ，<span style="color: black;">因此</span> A = 0ID<span style="color: black;">选取</span>器总共<span style="color: black;">显现</span>了1次， B = 1类<span style="color: black;">选取</span>器<span style="color: black;">显现</span>了1次， 属性<span style="color: black;">选取</span>器<span style="color: black;">显现</span>了0次，伪类<span style="color: black;">选取</span>器<span style="color: black;">显现</span>0次，<span style="color: black;">因此</span> C = (1 + 0 + 0) = 1标签<span style="color: black;">选取</span>器<span style="color: black;">显现</span>了3次， 伪元素<span style="color: black;">显现</span>了0次，<span style="color: black;">因此</span> D = (3 + 0) = 3<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>算出的A 、 B、C、D <span style="color: black;">能够</span>简记作：(0, 1, 1, 3)。</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>再来做<span style="color: black;">有些</span>练习：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">li</span> <span style="color: black;">/* (0, 0, 0, 1) */</span>
<span style="color: black;">ul</span> <span style="color: black;">li</span> <span style="color: black;">/* (0, 0, 0, 2) */</span>
<span style="color: black;">ul</span> <span style="color: black;">ol</span><span style="color: black;">+</span><span style="color: black;">li</span> <span style="color: black;">/* (0, 0, 0, 3) */</span>
<span style="color: black;">h1</span> <span style="color: black;">+</span> <span style="color: black;">*[</span><span style="color: black;">REL</span><span style="color: black;">=</span><span style="color: black;">up</span><span style="color: black;">]</span> <span style="color: black;">/* (0, 0, 1, 1) */</span>
<span style="color: black;">ul</span> <span style="color: black;">ol</span> <span style="color: black;">li</span><span style="color: black;">.</span><span style="color: black;">red</span> <span style="color: black;">/* (0, 0, 1, 3) */</span>
<span style="color: black;">li</span><span style="color: black;">.</span><span style="color: black;">red</span><span style="color: black;">.</span><span style="color: black;">level</span> <span style="color: black;">/* (0, 0, 2, 1) */</span>
<span style="color: black;">.</span><span style="color: black;">a1</span><span style="color: black;">.</span><span style="color: black;">a2</span><span style="color: black;">.</span><span style="color: black;">a3</span><span style="color: black;">.</span><span style="color: black;">a4</span><span style="color: black;">.</span><span style="color: black;">a5</span><span style="color: black;">.</span><span style="color: black;">a6</span><span style="color: black;">.</span><span style="color: black;">a7</span><span style="color: black;">.</span><span style="color: black;">a8</span><span style="color: black;">.</span><span style="color: black;">a9</span><span style="color: black;">.</span><span style="color: black;">a10</span><span style="color: black;">.</span><span style="color: black;">a11</span> <span style="color: black;">/* (0, 0, 11,0) */</span>
<span style="color: black;">#</span><span style="color: black;">name</span> <span style="color: black;">/* (0, 1, 0, 0) */</span>
<span style="color: black;">li</span><span style="color: black;">:</span><span style="color: black;">nth-child</span><span style="color: black;">(</span><span style="color: black;">odd</span><span style="color: black;">)</span> <span style="color: black;">main</span> <span style="color: black;">.</span><span style="color: black;">name</span> <span style="color: black;">/* (0, 0, 2, 2) */</span>
<span style="color: black;">#</span><span style="color: black;">name</span> <span style="color: black;">.</span><span style="color: black;">active</span> <span style="color: black;">></span> <span style="color: black;">a</span><span style="color: black;">:</span><span style="color: black;">hover</span> <span style="color: black;">/* (0, 1, 2, 1) */</span>
<span style="color: black;">html</span> <span style="color: black;">body</span> <span style="color: black;">#</span><span style="color: black;">name</span> <span style="color: black;">.</span><span style="color: black;">active</span> <span style="color: black;">></span> <span style="color: black;">a</span><span style="color: black;">:</span><span style="color: black;">hover</span> <span style="color: black;">/* (0, 1, 2, 3) */</span>
</div>
<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>能清楚了优先级是怎么算的了。但</p>
你的见解真是独到，让我受益匪浅。 我完全赞同你的观点，思考很有深度。 你的见解真是独到，让我受益匪浅。 外链发布社区 http://www.fok120.com/ 楼主继续加油啊！外链论坛加油！
页:
[1]