html - 应用 CSS 规则，除非使用 :not 嵌套元素

Question

所以我有:

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

但是当 .element 是 .no-border 的 child 时，我希望忽略此规则，使用 :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 的子元素，那么边框仍然适用于 .element。

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

有什么帮助吗？

Answer 1

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

:not(.no-border)>.element

JSFiddle