使用:not CSS选择器

时间:2019-02-09 18:29:04

标签: html css

除了无色div之外,我想将所有p都涂成蓝色。

我尝试了p:not(.no-color):not(.no-color) pdiv: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中进行样式化。

3 个答案:

答案 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>