有空间和无空间的伪类的不同行为

Question

此问题与CSS伪类有关。 我仅以：last-child为例，我想它也发生在所有其他伪类中。

1. 鉴于我有以下简单的HTML：

<body>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</body>

2. 我添加以下CSS：

 body:last-child{ color:red; } 

 <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> 

没有空格，两个段落都将标记为红色

3. 当我在.body和：last-child之间设置空格时，只有第二段会被标记为红色-在Google Chrome中会发生这种情况，我看到代码段工具没有将任何段落标记为红色。

 body: last-child{ color:red; } 

 <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> 

问题：谁能帮助我了解为什么会这样？ 也许有什么东西可以更多地了解伪类在有空间和无空间的情况下的行为？

Answer 1

这是最后一段而不是最后一句话。

因此，只需执行以下操作：

body p:last-child{
   color: red;
}

空格分隔了下一级元素，以使CSS选择器起作用。

Answer 2

使用body:last-child ，您可以定位最后一个身体 （只有一个）。 因此，体内的所有东西都会变成红色。

body: last-child无效，因为它无效。

您正在寻找的是body p:last-child 。

Answer 3

1.无间距

 body:last-child { color: red; } 

 <body> <p>Paragraph1</p> <p>Paragraph2</p> </body> 

在上面的代码中，所有p元素都是红色，因为color: red应用于主体，也应用于子元素。 body:last-child ，这里:last-child是父级的主体，并不表示body元素的最后一个子级。

---

2.带间距

body: last-child{
  color:red;
}

上面的语法无效，不适用样式。 您可以验证CSS： W3C CSS验证程序

---

3.解决方案：

body p:last-child { /* Select the paragraph which is last inside body */
  color: red;
}

避免在SO代码段中使用此代码，因为子选择器的样式难以设置。 <link>和<script>已添加/添加到标记中，并中断了子选择器。

Answer 4

伪元素应该始终在元素和冒号之间没有空格的情况下工作。

身体p：最后一个孩子{颜色：红色； }