选择不以字符串开头的类

Question

我想选择一个不包含以以下开头的类的子元素z-depth-:

<div class="well">
    <div class="well"></div>
</div>

因此,如果内部.well也包含类似z-depth-1它不会被选中的类.

这是行不通的,因为内部.well总是被选中:

.well .well:not([class^="z-depth-"])

这甚至可能吗？

Answer 1

您不能 选择不包含z-depth-以CSS 开头的类的子元素,您只能:

1. 选择class属性值不从z-depth-子字符串开始的所有子元素:

.well .well:not([class^="z-depth-"]) {
    color: red;
}

<div class="well z-depth-1">Parent div
    <div class="z-depth-2 well">First child div</div>
    <div class="well z-depth-3">Second child div</div>
</div>

2. 选择其class属性值不包含z-depth-子字符串的所有子元素:

.well .well:not([class*="z-depth-"]) {
    color: red;
}

<div class="well z-depth-1">Parent div
    <div class="z-depth-2 well">First child div</div>
    <div class="well z-depth-3">Second child div</div>
    <div class="well">Third child div</div>
</div>

您还可以阅读有关MDN上所有CSS选择器的更多信息.

Answer 2

您需要结合^=和*=才能获得所需的结果。

.well:not([class^="z-depth-"]) { /*will ignore elements if the first class is z-depth-* */
  background-color: lightgreen;
}
.well:not([class*=" z-depth-"]) { /*will ignore elements if z-depth-* is second class or later */
  background-color: skyblue;
}

<div class="z-depth-1 well">z-depth-1 well</div>
<div class="well z-depth-1">well z-depth-1</div>

这是关于如何使用属性选择器的很好的指南。