Question

看看这个jsfiddle：http://jsfiddle.net/ZNddz/

.intro:first-letter {
    font-size: 130px;
}
span.letter {
    background-color: red;
    font-size: 30px;
}
p {
    font-size: 80px;
}

第一条规则由一个类选择器和一个pseudo-element选择器= 11

组成

第二条规则包含一个类选择器.letter和一个标记选择器span = 11

这两个规则具有相同的特异性，因此可以合理地相信获胜者应该是最后一种风格。显然事实并非如此。所以我决定在第二条规则中添加一个background-color属性，你可以看到它的高度为30px。

我从中推断出两条规则都没有选择相同的元素。但是，我想要对这种效果进行官方解释，这有点太离奇了。

Answer 1

我从中推断出两条规则都没有选择相同的元素。

这是因为.intro与p元素匹配，而span.letter是.intro的后代。如前所述，当选择器匹配不同的元素时，特异性不相关。但由于每个选择器匹配某个元素，因此会应用这两个规则，导致红色背景在span.letter上生效。

但是我想要对这种效果进行正式解释，这有点太奇怪了。

spec包含一些与您所拥有的示例非常相似的示例：以包含文本的内联级元素开始的块级元素，以及应用于块级元素的样式{ {1}}块级元素上的伪元素及其内联级子元素。在所有示例中，:first-letter伪元素在格式结构方面始终是最内层的后代;这意味着它嵌套在内联级子元素中。

最后一个例子说明了包含伪元素的元素层次结构，尽管前面的那个元素在其样式表中包含了一个重写规则，它演示了级联方面发生的事情：

以下CSS会使首字母大写字母大小上下两行：
:first-letter
此示例的格式如下：



虚构的标签序列是：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
 <TITLE>Drop cap initial letter</TITLE>
 <STYLE type="text/css">
 P { font-size: 12pt; line-height: 1.2 }
 P::first-letter { font-size: 200%; font-style: italic;
 font-weight: bold; float: left }
 SPAN { text-transform: uppercase }
 </STYLE>
 </HEAD>
 <BODY>
 The first few words of an article
 in The Economist.
 </BODY>
</HTML>
请注意， <P::first-letter> T </P::first-letter>he first few words of an article in the Economist. 伪元素标记与内容（即初始字符）相邻，而:: first-line伪元素开始标记紧接在块元素的开始标记之后插入。

在您的情况下，两个::first-letter声明都照常应用，但由于font-size嵌套在 .intro:first-letter中，因此它使用自己的span.letter值。如果您使用了相对值it would be calculated based on span.letter，并且根本没有包含font-size样式it would simply inherit it from span.letter。

请注意，font-size伪元素不适用于内联级元素（但它确实适用于内联块）：

在CSS中，:first-letter伪元素适用于块状容器，例如块，列表项，表格单元格，表格标题和内联块元素。

内联框（使用::first-letter生成的框）不是block container box。（块容器框的内联级框的示例是内联块。）

如果浏览器将伪元素应用于内联，那么它违反了规范。虽然没有迹象表明当您对块容器和内联框后代都有display: inline规则时会发生什么，因为它确实说它不适用于内联，理想情况下浏览器应始终忽略规则定位内联框后代。显然，Chrome认为不然;见Danield's answer。

Answer 2

我从中推断出两条规则都没有选择相同的元素。

正确。你不必推断这一点。只需打开检查元素。

给出以下标记：

<p class="intro first"><span class="letter">L</span>sometext</p>

以下代码设置:first-letter标记上的伪元素：

.intro:first-letter {
    font-size: 130px;
}

以下代码在span元素

上设置font-size

span.letter {
    background-color: red;
    font-size: 30px;
}

范围上的代码不会覆盖 上的代码 - 因为它们的目标是不同的属性。

如果我在跨度上设置first-letter伪元素 - 那么它将覆盖上的代码

Here's a jsFiddle as proof

所以你看到这里没有特殊问题。

考虑到考虑后，同样的特殊性：第一封信总是赢？

2 个答案: