Question

我想让div foo的直接子句的段落有蓝色文本，所有其他段落都有蓝色文本，但我写的css是将该样式应用于嵌套的

标签里面div也是。

CSS：

p {
  color:red;
}

#foo > p{
 color: blue;
}

HTML

<html>
<head>
  <link type="test/css" rel="stylesheet" href="test.css"/>
</head>
<body>
  <div id="foo">
  <p>
      This is the first line.<br/>
      This is the second line
      <p>Nested Paragraph</p>
  </p>
  </div>
  <p>Paragraph in new div</p>
</body>
</html>

输出（Chrome）

这是第一行。（蓝色）这是第二行（蓝色）

嵌套段落（蓝色）

新div中的段落（红色）

Answer 1

p元素中没有其他p元素。浏览器行为将嵌套p放在外面。因为你的所有段落都是#foo元素的子项。

以下HTML：

<p>
    This is the first line.
    This is the second line
    <p>Nested Paragraph</p>
</p>

导致此输出：

<p>
    This is the first line.
    This is the second line
</p>
<p>Nested Paragraph</p>

检查以下小提琴输出的HTML，你可以看到我在说什么：https://jsfiddle.net/lmgonzalves/ahse0jzg/

Answer 2

<p>元素只能包含phrasing content。

<p>元素被视为flow content，因此您的标记无效并且解析得很差。你不能嵌套<p>元素。

您的CSS选择器可以使用正确的HTML。

CSS子选择器应用于嵌套元素

2 个答案: