我對CSS選擇器的認識

我對CSS選擇器的認識

1、簡述　　

　　CSS選擇器是對HTML元素進行選擇的篩選條件，大概能夠分爲兩類：

1. 特徵選擇器——根據元素自身所具備的某種特徵進行篩選，好比名稱、ID、屬性等；
2. 關係選擇器——根據元素與其餘元素的關係進行篩選，好比子元素、兄弟元素等；

　　在真正使用的時候，幾個簡單的選擇器能夠組合成更復雜的選擇器，因此誰也說不上CSS選擇器有多少。還有兩個選擇器是功能性的，它們能夠給元素已有內容以前或以後添加新內容。　

　　我作了一個項目，裏面包含一個測試CSS選擇器的小功能，請看這裏。

2、概括

　　下文中全部的 SELECTOR 都表明任何一個有效的選擇器。

　　1. 特徵選擇器：

描述	選擇器	備註
1. 不管有什麼特徵——即所有	* { }
2. 元素名稱是 "element"	element { }
3. 具備類名 "className"	.className { }
4. 具備id名 "someID"	#someID { }
5. 帶有屬性  attr	SELECTOR[attr] { }
6. 帶有屬性 attr，且屬性值爲 "value"	SELECTOR[attr="value"] { }
7. 帶有屬性 attr，且其若干個屬性值中有一個是 "value"	SELECTOR[attr~="value"] { }
8. 帶有屬性 attr，且其屬性值包含字符串 "str"	SELECTOR[attr*="str"] { }
9. 鼠標正位於其上方	SELECTOR:hover { }
10. SELECTOR 是個獨生子——它的父元素只有它這一個子元素	SELECTOR:only-child { }
11. SELECTOR 是其父親的第一個子元素	selector:first-child { }
12. SELECTOR 是其父親的第 N 個子元素	selector:nth-child(N) { }
13. SELECTOR 是其父親的最後一個子元素	selector:last-child { }
14. SELECTOR 內部是真空——連空格都沒有	SELECTOR:empty { }
15. SELECTOR 被某個連接錨定了，並且該連接被點擊了	SELECTOR:target { }	<a href="#topic">跳轉到 SELECTOR 處</a>
16. SELECTOR 中被用戶經過鼠標拖動選中的內容	SELECTOR::selection { }
連接專有的特徵
17. 未被訪問的連接	a:link { }
18. 已被訪問的連接	a:visited { }
19. 正在被點擊的連接	a:active { }
表格元素專有的特徵
20. 目標是啓用的	SELECTOR:enabled { }
21. 目標是禁用的	SELECTOR:disabled { }
22. 目標是被選中的（單選框、複選框）	SELECTOR:checked { }
23. 目標得到了焦點	SELECTOR:focus { }	能接收用戶輸入的元素，當它正在接收時，就得到了焦點。
兩個功能性選擇器
24. 給 SELECTOR 的內容以前加上些東西	SELECTOR:before { }
25. 給 SELECTOR 內容以後加上些東西	SELECTOR:after { }

　　2. 關係選擇器

描述	選擇器	備註
1. SELECTOR1 和 SELECTOR2	SELECTOR1, SELECTOR2 { }
2. 位於 SELECTOR1 以後的全部兄弟元素 SELECTOR2	SELECTOR1~SELECTOR2 { }
3. 與 SELECTOR1 緊鄰着的 SELECTOR2 元素	selector1+selector2 { }
4. SELECTOR 的首字母	selector:first-letter { }	相似的還有  SELECTOR:first-line { }
5. SELECTOR1 的全部子元素 SELECTOR2	selector1>selector2 { }
6. SELECTOR1 的全部後代元素 SELECTOR2	selector1 selector2 { }
7. 全部不是 SELECTOR2 的 SELECTOR1	SELECTOR1:not(SELECTOR2) { }

　　我的淺薄之見，確定有不到之處，但願獲得有心之人指正，謝謝！