CSS优先级奇怪行为

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

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个像素？提前致谢。

来源

2014-11-01 user3753202

选择器优先级是CSS中最难的事情。不要试图去了解它=）当出现特定问题时找出答案。 – Rudie 2014-11-01 20:02:10

根据我提到的文章，我认为第一个选择器的优先级是0,0,1,2，而第二个选择器的优先级是0,0,0,3。因此，我预计第一个选择器的规则被应用... – user3753202 2014-11-01 20:12:28

也许这可以帮助：http://stackoverflow.com/questions/19118036/same-specificity-after-taking-placement-into-consideration-first-字母总是 – 2014-11-01 21:34:51

我刚刚在Firefox中查看了你的小提琴，并且你没有问题，它工作正常。所要求的字的字体大小是12px。但是第一个字母的伪元素就是将第一个字母识别为一个单独的实体，并将其与该词的其余部分用于不同的风格。因此，第一个字母的特殊性与整个单词的特殊性完全分开;他们不会互相推翻。所以你的小提琴中的第一个字母是正确的20px。

来源

2014-11-01 20:42:36 GuyH

好吧，我现在明白了。发生这种情况是因为不同的元素第一个字母是李的另一个元素。谢谢您的回复。 – user3753202 2014-11-02 01:20:43

我并不是暗示他们是不同的元素，它们实际上不是作为元素存在的;例如，你不会在DOM中找到它们。这就是为什么他们被称为伪元素，以及为什么我使用单词实体而不是元素！它们只是识别实际元素的一部分的手段，并告诉渲染引擎对该部分应用不同的样式。 – GuyH 2014-11-02 18:13:41

CSS优先级奇怪行为

回答

相关问题