CSS中第一线和第一胎的特异性?

时间:2013-12-12 22:48:31

标签: html css

我有以下HTML代码:

<!DOCTYPE html>
<html>
<head>
<style>
:first-line {
    color: red;
}
:first-child {
    color: blue;
}
</style>
</head>
<body>
<p>asdasdasdsad<br>sdfsdfs</p>
</body>
</html>

输出结果为:

asdasdasdasd&lt; - red

sdfsdfs&lt; - blue。

然而,我在想的是p标签是身体的第一个孩子。 first-child是一个伪类,它的特异性为10,第一行是一个伪元素,它的特异性为1.因此,这两行应该显示为蓝色文本,但我显然是错误的。< / p>

请指出我的错误。非常感谢你。

4 个答案:

答案 0 :(得分:4)

:first-line选择器直接应用于第一行,而:first-child选择器继承自它应用的元素。

直接应用于项目的样式优先于继承的样式。

您可以通过添加元素,id和类选择器来使元素的选择器更具体,但它仍然不能优先于应用于第一行的样式。演示:http://jsfiddle.net/Guffa/3H4Ab/

答案 1 :(得分:0)

我认为当你使用<br>时,sdfsdfs会转到一个新行,因此它不会是第一行,但它仍然是body标签的第一个子节点,它将是蓝色的。同样,当您指定第一行的颜色时,它将显示为红色。 (只是试图推理)

答案 2 :(得分:0)

  

p标签是身体的第一个孩子。 first-child是一个伪类,具有10的特异性,第一行是伪元素,具有1的特异性。

嗯,不。 first-line继承了样式并在伪类(10 1)中添加了1个伪元素,所以它绝对正常。

答案 3 :(得分:0)

我刚读过那个

  

在CSS 3中,您需要区分伪元素   通过在开头使用双冒号(::)来伪类   元件。

on http://css-tricks.com/specifics-on-css-specificity/