Question

在下面的示例和代码片段中，我看到first-letter伪元素覆盖了具有更高特异性的其他选择器。我击败伪元素的方式是使用更高的特异性选择器。请参阅.blue列表项。

li.blue::first-letter

我想弄清楚为什么会这样。我试过基于css3 spec使用

list-style-position: inside

但这并没有产生预期的效果。

我在这里缺少什么？

/* 0002 */
li::first-letter {
  color: orange;
  background-color: black;
}

/* 0011 */
li.red {
  color: red;
  background-color: grey;
}

/* 0011 */
li.green {
  color: green;
  background-color: #454564;
}

/* 0011 and 0012 */
li.blue,
li.blue::first-letter {
  color: blue;
  background-color: grey;
}

<main>
  <ul>
    <li class="red">RED</li>
    <li class="green">GREEN</li>
    <li class="blue">BLUE</li>
  </ul>
</main

Answer 1

这不是特异性问题。你只是在这里处理不同的元素 - 被授予，其中一个只是一个伪元素，但仍然。

当几个规则匹配相同的元素时，特异性才会发挥作用 - 这不是这种情况。

这与您拥有以下内容几乎相同：

＆＃13;

html .red { /* html in front to increase specificity */
  color: red;
  background-color: grey;
}

.first-letter { /* replaced pseudo element with a class and a "real" element here */
  color: orange;
  background-color: black;
}

＆＃13;

<div class="red"><span class="first-letter">R</span>ED</div>

＆＃13;

现在，您不希望将外部元素的格式设置为＆＃34;覆盖＆＃34;内在的那个，对吧？

第一个字母伪元素覆盖更高的特异性规则

1 个答案: