Question

我有以下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>

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

我刚读过那个

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

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

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

4 个答案: