带空格和不带空格的伪类的不同行为答案

【问题标题】：Different behavior for pseudo-class with space and without space带空格和不带空格的伪类的不同行为
【发布时间】：2015-09-01 10:49:51
【问题描述】：

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

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

body:last-child{
	color:red;
}

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

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

当我在 .body 和 :last-child 之间设置空格时，只有第二个段落会被标记为红色 - 这发生在 Google Chrome 中，我看到 sn-p 工具不会将任何段落标记为红色。

body: last-child{
	color:red;
}

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

问题：谁能帮我理解为什么会这样？也许有什么可以阅读更多关于空间行为和没有空间的伪类？

【问题讨论】：

【解决方案1】：

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

所以，就这样做吧：

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

空格分隔下一级元素，以便 css 选择器起作用。

【讨论】：

【解决方案2】：

伪元素应该总是在元素和冒号之间没有空格的情况下工作。例如

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

【讨论】：

【解决方案3】：

1.没有间距

body:last-child {
  color: red;
}

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

在上面的代码中，所有p 元素都是红色的，因为color: red 被应用到body 并且也被应用到子元素。 body:last-child，这里的:last-child 是对父元素的 w.r.t，并不意味着 body 元素的最后一个子元素。

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 sn-ps 中使用它，因为子选择器很难设置样式。 <link> 和 <script> 被添加/附加到标记并破坏子选择器。

【讨论】：

【解决方案4】：

使用body:last-child，您定位到最后一个body（只有一个）。所以身体内的一切都会被染成红色。

body: last-child 不起作用，因为它无效。

你要找的是body p:last-child。

【讨论】：