https://amatsuzero.github.io/LastStand/tags/%E4%BC%98%E5%85%88%E7%BA%A7/Recent content in 优先级 on Last StandHugozh-cnSun, 10 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/css/css-004/Thu, 10 Oct 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/css/css-004/<p>在前端面试中，经常会遇到CSS选择器的问题三连：</p> <ol> <li>说一下CSS的选择器有哪些</li> <li>优先级是怎样的</li> <li>权重计算方式</li> </ol> <p>今天就来给大家介绍选择器的优先级和权重计算方式。</p> <h2 id="优先级是什么有什么用">优先级是什么？有什么用？</h2> <p>先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？</p> <p>其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。</p> <p>换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 <strong>匹配的选择器</strong> 中的 <strong>每一种选择器类型的数值</strong> 决定。</p> <p>总结一下：</p> <ul> <li>权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。</li> <li>当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。</li> <li>每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。</li> <li>如果两个选择器同时作用到一个元素上，权重高者生效。</li> </ul> <h2 id="权重的计算规则">权重的计算规则</h2> <p>接着介绍权重的计算规则：</p> <ul> <li>第一优先级：<code>!important</code>会覆盖页面内任何位置的元素样式</li> <li>内联样式，如<code>style=&quot;color: green&quot;</code>，权值为<strong>1000</strong></li> <li>ID选择器，如<code>#app</code>，权值为<strong>0100</strong></li> <li>类、伪类、属性选择器，如<code>.foo</code>, <code>:first-child</code>, <code>div[class=&quot;foo&quot;]</code>，权值为<strong>0010</strong></li> <li>标签、伪元素选择器，如<code>div::first-line</code>，权值为<strong>0001</strong></li> <li>通配符、子类选择器、兄弟选择器，如<code>*, &gt;, +</code>，权值为<strong>0000</strong></li> <li>继承的样式没有权值</li> </ul> <p>权值计算公式：</p> <blockquote> <p><code>权值</code> = <code>第一等级选择器</code> x <code>个数</code>，<code>第二等级选择器</code> x <code>个数</code>，<code>第三等级选择器</code> x <code>个数</code>，<code>第四等级选择器</code> x <code>个数</code></p> </blockquote> <p>比如：</p> <table> <thead> <tr> <th>选择器</th> <th>千位</th> <th>百位</th> <th>十位</th> <th>个位</th> <th>优先级</th> </tr> </thead> <tbody> <tr> <td>h1</td> <td>0</td> <td>0</td> <td>0</td> <td>1</td> <td>0001</td> </tr> <tr> <td>h1 + p::first-letter</td> <td>0</td> <td>0</td> <td>0</td> <td>3</td> <td>0003</td> </tr> <tr> <td>li &gt; a[href*=&ldquo;en-US&rdquo;] &gt; .inline-warning</td> <td>0</td> <td>0</td> <td>2</td> <td>2</td> <td>0022</td> </tr> <tr> <td>#identifier</td> <td>0</td> <td>1</td> <td>0</td> <td>0</td> <td>0100</td> </tr> <tr> <td>内联样式</td> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>1000</td> </tr> </tbody> </table> <h2 id="权重的比较规则">权重的比较规则</h2> <p>当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应&ndash;&gt; 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。</p>