10

看看这个 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。

我从中推断出两个规则都没有选择相同的元素。但是我想对这个大意有一个官方的解释，这有点太奇怪了。

4

2 回答 2

5

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

这是因为.introis 匹配p元素，而span.letter是 的后代.intro。As already mentioned, specificity is not relevant when selectors are matching different elements. 但是由于每个选择器都匹配某些元素，所以两个规则都适用，导致您的红色背景生效，在span.letter.

但是我想对这个大意有一个官方的解释，这有点太奇怪了。

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

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

下面的 CSS 将使首字母首字母跨越两行：

<!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>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

此示例的格式可能如下：

虚构的标签序列是：

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

请注意，::first-letter伪元素标签紧靠内容（即初始字符），而 ::first-line 伪元素开始标签插入到块元素的开始标签之后。

在您的情况下，两个font-size声明都照常适用，但由于.intro:first-letter嵌套在 内 span.letter，它使用自己的font-size值。如果您使用相对值，它将基于 计算span.letter，如果您根本不包含font-size样式，它将简单地从span.letter.

请注意，:first-letter伪元素不适用于内联元素（但它确实适用于内联块）：

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

内联框（使用 生成的display: inline）不是块容器框。（作为块容器盒的内联级盒的一个示例是内联块。）

如果浏览器将伪元素应用于内联，那么它违反了规范。虽然没有迹象表明当您:first-letter同时拥有块容器和内联框后代的规则时会发生什么，因为它确实说它不适用于内联，理想情况下浏览器应该始终忽略针对内联框后代的规则。显然，Chrome 不这么认为。见丹尼尔德的回答。

于 2013-10-01T15:04:15.540 回答
2

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

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

给定以下标记：

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

以下代码:first-letter在标签上设置伪元素<p>：

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

以下代码font-size在 span 元素上设置

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

span上的代码不会覆盖-上的代码，<p>因为它们针对不同的属性。

如果我first-letter在跨度上设置了伪元素 - 那么它将覆盖<p>

这是一个 jsFiddle 作为证明

所以你看这里没有特异性问题。

于 2013-10-01T14:29:35.063 回答