1.包含選擇符(e f)
選擇所有被e 元素包含的f 元素，中間用空格隔開ul li
1.子選擇符(e > f)
選擇所有作為e 元素的直接子元素f，對更深一層的元素不起作用，用大於號表示。
2.相鄰選擇符(e+f)
選擇緊貼在e 元素之後f 元素，用加號表示，選擇相鄰的第乙個兄弟元素。
3.兄弟選擇符(e~f)
選擇e 元素之後的所有兄弟元素f，作用於多個元素，用~號隔開。
屬性選擇器通過[ ] 進行定義。
1.e
[att] 選擇具有attr 屬性的e 元素
option
[disabled] //選擇帶有display 屬性的option 標籤
2 e[att="val"] 選擇具有att 屬性且屬性值等於val 的e 元素。
input [type="text"]
input [type="submit"]
3 e[att$=」val"] 選擇具有att 屬性且屬性值為以val 結尾的字串的e 元素
p[class$="1"] //選擇p 元素中class 屬性值以p 結尾的元素
qclass="p1 paragraph p11p">這是個段落p>
class="p1 paragraph p11p">這是個段落p>
class="p1paragraph p11">這是個段落p> //變紅
class="p1">這是個段落p> //變紅
4 e[att^=「val"] 選擇e 元素中有att 屬性，且以」val」開頭的元素
p[class^="p"] //選擇帶有class 屬性，屬性值以p 開頭的元素
class="a1">這是個段落p>
class="naragraph p11">這是個段落p>
class="p11">這是個段落p>
5 e[att*=」val"] 選擇具有att 屬性且屬性值包含val 的字串的e 元素。
a[href*="www"] //選擇a 標籤中href 屬性值包含baidu 的元素
href="#">空的超連結a>
href="">有道a>
6 e[att~="val"] 選擇有att 屬性的元素，且屬性值列表中有乙個符合val 的元素
p[class~="p1"] //選中p 元素下class 值包含p1 的元素
class="p1 paragraph p11">這是個段落
class="paragraph p11">這是個段落
class="p">這是個段落
1.e:link 設定超連結a 在未被訪問前的樣式（特指a 標籤）
2.e:visited 設定超連結a 在其鏈結位址已被訪問過時的樣式（特指a 標籤）
3.e:hover 設定滑鼠懸停在元素上時的樣式。不限於a 標籤，p、li 也可以使用
4.e:active 設定元素在滑鼠按下時的樣式（不限於a 標籤）
5.e:not(s) 匹配不含有s 選擇器的元素e。
p:not(.p1)
6.e
:first-child 父元素的第乙個子元素e。
滿足兩個條件a.必須有父元素b.它是父元素的第乙個子元素
7.e
:last-child 父元素的最後乙個子元素e
條件同上
8.e:only-child e 元素是唯一的子元素時被匹配
段落p> 此時body 中只有這乙個元素，所以p:only-child 會生效
body>
9.e:empty 匹配沒有任何子元素（並且不包括空格、回車）的元素e
p:empty
p>
p> //不會被選中
div> //空，但不是p 元素
我是乙個p 元素p> //有text 文字節點
p> //有子元素
10.e:checked 匹配使用者介面上處於選中狀態的元素e。(用於input type 為radio 與checkbox 時)
input:checked+span
type="radio"
name="gender" />
男生span>
type="radio"
name="gender"
checked="checked" />
女生span>
*input 下被選中的元素緊挨著的span 顏色為紅色，因為選中狀態會變，所以看著像動態的
偽類和偽物件（元素）的區別
偽類一般反映無法在css 中輕鬆或者可靠檢測到的某個元素的狀態或者屬性；
偽元素表示dom 外部的某種文件結構
常用偽元素
1.e:before/e::before
2.e:after/e::after
偽元素是在元素內容的前面或後面定義的，必須要新增content:」」這個屬性，不然偽元素無法定義成功。
p::after
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...