CSS E:not()

admin發表於2018-11-06
CSS

E:not()是一個偽類選擇器。

接受一個選擇器引數，能夠從E匹配的元素集合中刪除選擇器引數所匹配的元素。

它不會提高選擇器的優先順序，與其他偽類選擇器不同。

關於優先順序可以參閱CSS 優先順序一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:not(s) { sRules }

引數解析：s：一個CSS選擇器。

瀏覽器支援:

（1）.IE9+瀏覽器支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
li:not(.a){
  color:blue;
}
</style>
</head>
<body>
<div>
  <ul>
    <li class="a">螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li class="a">螞蟻部落三</li>
    <li>螞蟻部落四</li>
  </ul>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/102940ux1po4xezbj914ma.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

li可以匹配所有的li元素，然後通過:not將class屬性值為"a"的元素篩選掉。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div:not(.a){
  color:blue;
}
</style>
</head>
<body>
<div class="a">
  <div>螞蟻部落一</div>
</div> 
<div>螞蟻部落二</div>
<div>螞蟻部落三</div>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/103012oyesfk1zysbszrjs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然將class屬性值為"a"的div元素篩選掉，但是並不會對它的子元素產生影響。

也就是說只會對引數選擇器匹配的元素自身有效，對它後代元素無效。

相關文章