CSS后代选择器失效求助：嵌套div无法应用目标样式

你的CSS后代选择器写法没问题，问题出在HTML结构不符合规范：

p标签属于文本级元素，HTML规范明确规定p元素不能嵌套div这类块级元素。浏览器解析代码时会自动修正DOM结构，把<div class="c2">从p标签里移出来，最终实际的DOM结构会变成这样：

<p class="c1">Outer paragraph</p>
<div class="c2">Inside nested element</div>
<p></p>

此时div已经不再是.c1的后代元素，.c1 div选择器自然无法匹配到它。

解决方法 #

把外层的p标签换成块级元素（比如div），就能让后代选择器正常工作：

修改后的完整代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .c1 div {
      background-color: red;
    }

    h1 {
      color: #00b339
    }
  </style>
</head>

<body>
  <h1>Demo of the descendant selector</h1>
  <div class="c1">Outer container
    <div class="c2">Inside nested element</div>
  </div>
</body>

</html>

这样.c1 div就能正确选中内部的div，为它添加红色背景。

内容的提问来源于stack exchange，提问作者datafiddler