不以字符串

Question

開始選擇I類要選擇不含一類具有z-depth-開頭的子元素：

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

因此，如果內。好了還含有一類像z-depth-1它將不會被選中。

這是不工作，因爲內部。好總是選擇：

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

是，即使可能嗎？

Answer 1

您不能選擇不包含與z-depth-開始CSS，你只能一類的子元素：

1. 選擇所有的子元素，其class屬性值

.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>

：不要 z-depth-子開始

選擇所有的子元素，其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。