結構偽類選擇器是針對 HTML 層級結構的偽類選擇器。
常用的結構化偽類選擇器有：
:root選擇器、:not選擇器、:only-child選擇器、:first-child選擇器、:last-child選擇器、
:nth-child選擇器、:nth-child(n)選擇器、:nth-last-child(n)選擇器、:nth-of-type(n)選擇器、
:empty選擇器、:target選擇器。
這些基本上都很常用，今天著重說下：否定偽類:not()
否定偽類特別有用，在css中, :not選擇器 用于匹配非指定元素/選擇器的每個元素,語法格式：
:not(selector)
比如：假設我想選擇所有 div，除了 id 為 的那個 container。下面代碼：
div:not(#container) {color: blue;
}
否定偽類:not()的幾個特點：
- :not()的優先級是 0，因為它的優先級是由括號里面的參數來定的；
- :not()偽類可以同時判斷多個選擇器，比如input:not(:disabled):not(:read-only)
{}，表示匹配不屬于禁用狀態同時也不處于只讀狀態的 input 元素； - not()支持多個表達式，比如：.cs-li:not(li, dd)
{}，還有另外一種寫法：.cs-li:not(li):not(dd) {}。但是這兩種寫法，要考慮兼容性問題； - :not()也支持選擇符，比如：input:not(.a > .b) { border: red solid; };
今天遇到一個問題，想把首頁除了logo之外的其他元素變黑白，但是用否定偽類卻出現很奇怪的問題，其他有部分元素還是彩色的，代碼如下：
.home div:not(.logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; filter: gray;
}
然后改為：效果一樣
.home div:not(.header > .logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; filter: gray;
}
后來換成另一種寫法卻可以，代碼如下：
.home div:not(.header):not(.logo){-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; filter: gray;
}
后來試驗了一下，多少層級關系就要寫多少個:not()，例如：
<div class="header"><div class="box"><div class="logo"></div></div>
</div>
就要寫為：
.home div:not(.header):not(.box):not(.logo)
)
