a标签被选择的底色_「前端剑指offer第1期」CSS选择器优先级是怎样计算的？

问题

CSS选择器优先级是怎样计算的？

回答

选中且设置!important的 > 权重高的 > 权重相同位置靠后的 > 来自继承的 如果两组选择器都定位到同一元素，且对同一属性设置不同的样式，则需要分别计算两组选择器的权重来确定优先级。一个选择器的优先级可以说是由四个部分计算得分，比较时按位比较。

1. 千位：如果声明在 style 的属性则该位得一分。
2. 百位：选择器中包含ID选择器则该位得一分。
3. 十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。
4. 个位：选择器中包含标签选择器、伪元素选择器则该位得一分。比如 #header p.content.active 得分为 0121。.header p.active::before 的权重是 0022。前者权重大于后者。

解析

题目1: 有如下代码，p标签的颜色是什么?

• A、 red
• B、 blue

<p style="color: red">饥人谷前端</p>
<style>
  p { color: blue!important; }
</style>

答案是: blue ，因为不管是内联样式，还是标签选择器都能选择元素，而!important的优先级最高。

题目2: 有如下代码，p标签的颜色是什么?

• A、 red
• B、 blue

<p>饥人谷前端</p>
<style>
  p { color: red  }
  body { color: blue!important; }
</style>

答案是: red ，因为 对p标签来说，给body设置的样式虽然会继承到p上，但继承的样式优先级是最弱的，设置的 red会覆盖来自继承的样式 blue。

题目3: 有如下代码，a标签的颜色是什么?

• A、红色
• B、默认的蓝色

<a>饥人谷前端</a>
<style>
  body { color: red!important; }
</style>

答案是默认的蓝色 ，原因同上，因为a链接有默认颜色，给body设置的color虽然会继承到a链接上，但a链接默认的蓝色优先级大于继承的颜色，会覆盖来自继承的样式。

题目4: 有如下代码，h1标签的颜色是什么?

• A、 red
• B、 yellow

<div id="article" class="box">
  <h1 id="title" class="title">饥人谷前端</h1>
</div>

<style>
  div.box h1#title { color: yellow }
  #article h1.title { color: red }
</style>

答案是 yellow ，两组选择器都能定位到h1，div.box h1#title 的权重是 0112（0个style，1个id，1个class，2个标签），#article h1.title 的权重是 0111 (0个style，1个id，1个class，1个标签)，前者权重大于后者。

题目5: 有如下代码，h1标签的颜色是什么?

• A、red
• B、yellow

<div id="article" class="box">
  <h1 id="title" class="title">饥人谷前端</h1>
</div>

<style>
  .box h1#title { color: yellow }
  #article h1.title { color: red }
</style>

答案是 red ，两组选择器都能定位到h1， .box h1#title 的权重是 0111（0个style，1个id，1个class，2个标签），#article h1.title 的权重是 0111 (0个style，1个id，1个class，1个标签)，两组选择器权重相同，位置靠后的会覆盖位置靠前的。

题目6: 有如下代码，h1标签的颜色是什么?

• A、red
• B、yellow

<div id="article" class="box">
  <h1 id="title" class="title" style="color:red">饥人谷前端</h1>
</div>

<style>
  .box h1#title.title { color: yellow }
</style>

答案是 red ，.box h1#title.title 的权重是 0121（0个style，1个id，2个class，1个标签），而h1里的style直接设置样式的权重是 1000 (1个style)，优先级大于0121。