CSS优先级奇怪的行为答案

【问题标题】：CSS Precedence strange behaviourCSS优先级奇怪的行为
【发布时间】：2014-11-01 20:01:06
【问题描述】：

我正在研究 CSS 中的优先级并阅读了一些文章，包括：http://www.w3.org/TR/CSS2/cascade.html。据他说，像类这样的属性比伪元素具有更高的优先级。然而，当我做了一个简单的测试时，却发生了相反的情况。下面是我的代码：

HTML：

<ul>
    <li class="item">Item</li>
</ul>

CSS：

ul li.item { font-size: 12px; }
ul li:first-letter { font-size: 20px; }

看到它here。如果类的优先级高于伪元素，为什么第一个字母的字体大小是 12 像素而不是 20 像素？提前致谢。

【问题讨论】：

选择器优先级是 CSS 中最难的事情。不要试图学习它 =) 当有特定问题时弄清楚。
根据我提到的文章，我认为第一个选择器的优先级是 0,0,1,2，第二个选择器的优先级是 0,0,0,3。因此，我希望应用第一个选择器的规则...
也许这会有所帮助：stackoverflow.com/questions/19118036/…
@HashemQolami - 谢谢，它有所帮助，甚至有点不同。

标签： css operator-precedence

【解决方案1】：

我刚刚在 Firefox 中查看了您的小提琴，您没有遇到问题，它工作正常。按照要求，单词的字体大小为 12px。但是第一个字母的伪元素就是将第一个字母识别为一个单独的实体，并赋予它与单词其余部分不同的样式。因此，第一个字母的特殊性与整个单词的特殊性完全分开；它们不会相互覆盖。所以你在小提琴中的第一个字母是正确的 20px。

【讨论】：

好的，我现在明白了。发生这种情况是因为是不同的元素。第一个字母是 li 的不同元素。感谢您的回复。
我并不是在暗示它们是不同的元素；它们实际上并不作为元素存在；例如，您不会在 DOM 中找到它们。这就是为什么它们被称为伪元素，以及为什么我使用实体这个词而不是元素！它们只是一种识别实际元素的一部分的方法，并告诉渲染引擎将不同的样式应用于该部分。