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 ，你只能：

选择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属性的值不包含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>

这是关于如何使用属性选择器的nice guide。

选择不以字符串开头的类

2 个答案: