CSS 规则的优先顺序

Question

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

也就是说， ID 选择器比 class 选择器更具体，后者更特定于标签选择器，如下所示，

#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

Order of precedence of CSS rules