CSS规则的优先顺序

Question

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

这意味着， ID选择器比类选择器更具体，后者又更多 特定于标签选择器，如下所示，

＆＃13;

＆＃13;

#id1 {
  color: blue;
}
.class1 {
  color: red;
}
p {
  color: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

对于以下代码，

＆＃13;

＆＃13;

p[data-colour] {
  color: yellow;
}
#id1 {
  color: blue;
}
.class1 {
  color: red;
}
p {
  color: green;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

它仍然是blue。属性选择器与类处于同一级别。有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity