CSS规则的优先顺序[重复]

Posted 2023-03-06

【中文标题】CSS规则的优先顺序[重复]

【英文标题】：Order of precedence of CSS rules [duplicate]

【发布时间】：2017-01-04 19:14:10

【问题描述】：

如果多个 CSS 规则适用于一个 元素 并指定相同的属性， 然后 CSS 优先考虑具有更具体选择器的规则。

也就是说， ID 选择器比类选择器更具体，而类选择器又更 具体比标签选择器，如下图，

#id1 
  color: blue;

.class1 
  color: red;

p 
  color: green;

<p class="class1" id="id1">Sham</p>

输出是blue颜色的段落文本。

对于下面的代码，

p[data-colour] 
  color: yellow;

#id1 
  color: blue;

.class1 
  color: red;

p 
  color: green;

<p class="class1" id="id1" data-colour>Sham</p>

关于属性选择器，CSS 规则特异性是怎么说的？

【问题讨论】：

看看这里 ***.com/tags/css/info 在 css 特定选择器:)

这是一个实用的特异性计算器：specificity.keegan.st

见***.com/tags/css-specificity/info

【参考方案1】：

仍然是blue。属性选择器与类处于同一级别。更多信息请见：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

【讨论】：

.class1 是[class~=class1] 的同义词，因此它们具有相同的特异性。