Question

所以我有：

.element {
   border: 1px solid red;
   display: block;
}

但我希望.element使用.no-border伪选择器:not的孩子时忽略此规则。例如：

<div class="element">I have a border</div>

<div class="no-border">
   <div class="element">I don't have a border</div>
</div>

我试图使用以下方法执行此操作：

:not(.no-border) .element {
   border: 1px solid red;
   display: block;
}

但是，如果.element是.no-border的孩子，则边框仍然适用于<div>。

https://jsfiddle.net/7Lox10pL/1/

任何帮助？

Answer 1

您应该使用直接后代选择器>：

:not(.no-border)>.element

JSFiddle

Answer 2

您可以在.no-border的子项时创建单独的选择器，并使用initial覆盖样式，例如：

.no-border .element {
   border: initial;
   display: initial;
}

见JSFiddle的小提琴。

Answer 3

试试这个..

.outerclass {
        h3 {
            color: blue;
        }
        :not(.nested) (div > div)
        {
            color: green;
        }
        }

应用CSS规则，除非使用以下内容嵌套元素：not

3 个答案: