Question

此问题与CSS伪类有关。我指的是：例如，last-child，我想它也会发生在所有其他伪类中。

鉴于我有以下简单的HTML：

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

我添加了以下CSS：

body:last-child{
	color:red;
}

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

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

当我在.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;
}

Space将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与父母一起是w.r.t，并不代表身体元素的最后一个孩子。

<强> 2。间距

body: last-child{
  color:red;
}

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

第3。溶液

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

避免在SO片段中使用它，因为子选择器很难设计。 <link>和<script>被添加/附加到标记并中断子选择器。

Answer 4

伪元素应始终在元素和冒号之间没有空格.eg

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

具有空间且没有空间的伪类的不同行为

4 个答案: