除了无色div之外,我想将所有p
都涂成蓝色。
我尝试了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中进行样式化。
答案 0 :(得分:2)
如果您无法修改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>
答案 1 :(得分:1)
此选择器应该可以正常工作,而无需修改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>
(很抱歉,我以前的无用答案……我实际上已经测试过这个!)
编辑:固定答案
答案 2 :(得分:0)
我将把类放在<p>
上,然后p:not(.no-color)
可以工作。
但是,如果您不能更改HTML结构,则可以使用<p>
选择器来定位.no-color
类元素的后代.no-color p
,然后使用inherit
选择器颜色为inherit
。
将颜色设置为<p>
使您无需指定即可获取封闭父对象的颜色。
此技术适用于.no-color
父级下任意嵌套的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>
<autofac defaultAssembly="Autofac.Example.Calculator.Api">
<components>
<component
type="Autofac.Example.Calculator.Addition.Add, Autofac.Example.Calculator.Addition"
service="Autofac.Example.Calculator.Api.IOperation" />
<component
type="Autofac.Example.Calculator.Division.Divide, Autofac.Example.Calculator.Division"
service="Autofac.Example.Calculator.Api.IOperation" >
<parameters>
<parameter name="places" value="4" />
</parameters>
</component>