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

Question

如果多个 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 规则特异性是怎么说的？

Answer 1

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