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

Question

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

Rom*_*442 10 css css-selectors css-specificity css3 pseudo-element

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

Run Code Online (Sandbox Code Playgroud)

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

第二个规则由一个类选择器.letter和一个标签选择器span= 11组成

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

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

Answer 1

Bol*_*ock 5

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

这是因为.intro匹配p元素而span.letter后者是元素.intro.如前所述,当选择器匹配不同的元素时,特异性不相关.但由于每个选择器都匹配某个元素,因此会应用这两个规则,从而导致红色背景生效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>
Run Code Online (Sandbox Code Playgroud)
此示例的格式可能如下:

虚构的标签序列是:
<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>
Run Code Online (Sandbox Code Playgroud)
注意,::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认为不然; 见Danield的回答.

归档时间：	12 年，3 月前
查看次数：	247 次
最近记录：	9 年，10 月前