如何仅在p标签不嵌套于其他div时为其设置样式？

你的需求是给未嵌套在额外div中的p标签（即示例里.row直接子元素的p）设置样式，原CSS不生效的原因是选择器逻辑错误：.container > :not(.secondClass) + p试图匹配.container直接子元素中排除.secondClass的元素的相邻兄弟p，但目标p是.row的子元素，并非.container直接子元素的相邻元素，所以完全匹配不到。

以下是两种可行的实现方案：

方案一：精准匹配目标结构 #

直接针对目标p的层级结构写选择器，这是最直观且高效的方式：

.container .row > p {
  color: red;
}

这个选择器会匹配.row的直接子元素p，也就是你需要样式的那个p；而嵌套在.secondClass里的p是.secondClass的子元素，不会被该选择器选中。

方案二：通用匹配（适用于更复杂结构） #

如果需要更通用的规则，匹配所有父元素是div，但自身没有被其他嵌套div包裹的p，可以使用子选择器结合否定伪类：

div > p:not(div div > p) {
  color: red;
}

这个规则会选中所有直接父元素是div的p，但排除那些父元素是嵌套div（即被多层div包裹）的p，同样能满足你的需求。

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