使用：而不是CSS选择器

Question

我想用蓝色为我的所有p着色，除了无色div内的那个。

我试过p:not(.no-color) :not(.no-color) p ， div:not(.no-color) p但我觉得我误解了一些东西

 p:not(.no-color) { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"><p>Lorem ipsum</p></div> <p>Lorem ipsum</p> <div class="random-class"><p>Lorem ipsum</p></div> </div> 

编辑：自动检索HTML代码，因此我无法选择应用这些类的元素。 我只能在CSS中进行样式化。

Answer 1

如果你不能修改HTML，你可以使用这样的东西：

 .container > p, .container > div:not(.no-color) > p { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"> <p>Lorem ipsum</p> </div> <p>Lorem ipsum</p> <div class="random-class"> <p>Lorem ipsum</p> </div> </div> 

Answer 2

此选择器应该可以工作，而无需修改HTML：

 :not(.no-color) > p { color: blue; } 

 <div class="container"> <p>Lorem ipsum</p> <div class="no-color"><p>Lorem ipsum</p></div> <p>Lorem ipsum</p> <div class="random-class"><p>Lorem ipsum</p></div> </div> 

（对不起我之前的，无益的答案......我实际测试了这个！）

编辑：修正了答案

Answer 3

我会将课程放在<p> ，然后p:not(.no-color)会起作用。

但是，如果不能更改HTML结构，则可以使用.no-color p选择器将<p> s作为具有.no-color类的元素的后代，然后将颜色设置为inherit 。

将颜色设置为inherit允许您获取封闭父级的颜色而不指定它。

此技术适用于.no-color父级下面的任意嵌套<p>元素。

 p { color: blue; } .no-color p { color: inherit; } 

 <p>Lorem ipsum</p> <div class="no-color"> <p>Lorem ipsum</p> </div> <p>Lorem ipsum</p> <div class="no-color"> <div> <p>Lorem ipsum</p> </div> </div>