需求：替代/deep/的CSS选择器，选中X类下非Y类元素

嘿，我完全懂你的需求——想选中.x容器里的所有内容，但把所有带.y类的元素（不管它们在.x里的嵌套层级有多深）都排除掉，而且还不能用已经被废弃的/deep/选择器对吧？别担心，咱们用标准的CSS选择器就能完美解决这个问题，完全不需要依赖那些不被支持的语法。

核心方案：结合:not()与后代选择器 #

如果你的目标是既排除.y元素本身，也排除.y内部的所有子元素（也就是.y整个区块都不要），可以用这个选择器：

.x *:not(.y):not(.y *) {
  /* 在这里写你的样式规则 */
  color: red; /* 举个例子：把选中的文字变成红色 */
}

选择器拆解：

• .x *：选中.x容器下的所有后代元素（不管嵌套层级）
• :not(.y)：排除掉所有带.y类的元素本身
• :not(.y *)：进一步排除掉.y元素内部的所有子元素

这样一来，像你页面结构里的<div>1</div>、<p>2</p>这些不在.y区块里的内容都会被选中，而所有.y元素（包括它们的子内容）都会被排除在外。

补充：如果只想排除.y元素本身，保留其内部内容 #

要是你只是不想选中.y元素，但它里面的内容还需要选中，那简化一下选择器就行：

.x *:not(.y) {
  /* 你的样式 */
}

这个选择器会选中.x下所有不是.y的元素，.y内部的子元素也会被包含进来。

兼容性说明 #

:not()选择器在所有现代浏览器（Chrome、Firefox、Safari、Edge等）都有很好的支持，比早已被废弃的/deep/靠谱多了，完全不用担心兼容性问题。

内容的提问来源于stack exchange，提问作者Kamil Tomasz Jarmusik