如何使用:not选择器为父元素设CSS样式并排除指定ID子元素

首先要明确：原CSS是给 <li class="search-results"> 设置了 color: green，而 <p> 和 <span> 会继承这个颜色属性，所以两者文本都显示绿色。

要通过 :not 选择器让目标span不应用该样式，不能直接在li的选择器上用:not（因为继承不受父元素选择器的:not影响），但可以调整样式的作用对象，将颜色直接应用到li下除了指定span之外的子元素上，具体实现如下：

修改后的CSS代码：

ul li.search-results > *:not(#not-me-please) { color: green; }

原理说明 #

• 选择器 ul li.search-results > * 表示选中li的所有直接子元素
• :not(#not-me-please) 排除掉id为not-me-please的span元素
• 这样只有<p>会被设置为绿色，目标span不会继承到li的颜色（因为li本身没有设置color属性）

如果坚持要给li设置color，也可以用:not配合给span重置颜色，但这属于覆盖样式而非阻止继承，实际意义不大：

ul li.search-results { color: green; }
ul li.search-results > #not-me-please:not(*) { color: black; }

推荐使用第一种直接指定目标元素的方案。

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