子选择器无法选中元素：为何p.description > pre不生效？

• 核心问题：HTML规范里<p>是短语内容容器，不能嵌套<pre>这类块级元素。浏览器解析时会自动把<pre>从<p>里剥离出来，导致你的子选择器p.description > pre根本匹配不到任何元素。

举个例子，你写的HTML可能是这样：

<p class="description">
  这是一段描述
  <pre>代码块内容</pre>
</p>

但浏览器实际渲染的DOM结构会变成：

<p class="description">
  这是一段描述
</p>
<pre>代码块内容</pre>

此时<pre>的父元素已经不是<p.description>了，CSS自然失效。

• 解决办法：
  1. 把<p>换成块级容器，比如<div>：

     <div class="description">
       这是一段描述
       <pre>代码块内容</pre>
     </div>
     

     对应的CSS调整为div.description > pre{color:red}，就能正常选中目标元素。
  2. 要是必须保留<p>标签，要么把<pre>改成行内元素（不推荐，会破坏pre的格式特性），要么调整结构让pre成为p的兄弟元素，用相邻兄弟选择器：p.description + pre{color:red}。

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