如何使用CSS选择器筛选仅包含文本内容的<p>元素？

可以通过以下两种方式实现：

• 基于元素内容的精准筛选（推荐）
  使用 :not(:has(*)) 选择器，它能匹配不包含任何子元素的<p>元素——正好对应你需求里仅含文本的前两个<p>。
  原理：:has(*)会选中包含任意子元素（比如<a>、<span>）的<p>，:not()对这个结果取反，最终得到只有文本内容的目标元素。

  示例CSS代码：

  p:not(:has(*)) {
    color: darkblue;
    font-weight: bold;
  }
  

• 基于元素位置的筛选（兼容旧场景）
  如果你的项目需要兼容不支持:has()的旧浏览器，可以直接通过位置选择器选中前两个<p>：

  p:first-of-type, p:nth-of-type(2) {
    color: darkblue;
    font-weight: bold;
  }
  

  注意：这种方式依赖元素在DOM中的顺序，若后续DOM结构变动（比如新增<p>），需要调整选择器。

补充：:has()是CSS Selectors Level 4的特性，目前Chrome 105+、Firefox 121+、Safari 15.4+等现代浏览器都已支持。

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