css 常用選擇器

*{} 選定所有對象,會遍歷並命中文檔中所有的元素。全局樣式。:root匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML

css關係選擇器：

E F{} 選擇所有被E元素包含的F元素。選擇符將會命中所有符合條件的後代，包括兒子，孫子，孫子的孫子… E>F{} 選擇E元素裡面的子元素F，與前者 E F{}不同的是，子選擇符只能命中子元素，不能選中孫輩,如下示例：

.demo > div { position: relative;}<div> <div> <div>子選擇符</div> </div></div>//此時只有 .a 被選中 ，因為它是 .demo 的子元素 E+F{}, 選擇緊貼在E元素之後F元素 (E元素之後的第一個F元素)，元素E與F必須同屬一個父級。 E~F{},選擇E元素後面的所有兄弟元素F (會命中所有符合條件的兄弟元素)，元素E與F必須同屬一個父級。 註：選擇的只是同級的元素F，後代中的元素F不會被選擇。只作用於同級元素

(E+F)與 兄弟選擇符(E~F) 相同的是，相鄰選擇符也是選擇同級的元素F；不同的是，(E+F)只會命中符合條件的那個毗鄰的兄弟元素（即緊挨著E元素之後的第一個F元素）。css屬性選擇器E[att]{} 選擇具有att屬性的E元素。E[att=」val」]{} 選擇具有att屬性且屬性值等於val的E元素。E[att~=」val」]{} 選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等於val的E元素（包含只有一個值且該值等於val的情況），例：<style> div[class~="a"] { border: 2px solid #000; } </style> <div>1</div> <div>2</div> <div>3</div> //將會命中1, 3兩個div，因為匹配到了class屬性，且屬性值中有一個值為aE[att^=」val」] {} 選擇具有att屬性且屬性值為以val開頭的字符串的E元素。

<style>div[class^="a"] { border: 2px solid #000;}</style><div>1</div><div>2</div><div>3</div>//，將會命中1, 2兩個div，因為匹配到了class屬性，且屬性值以a開頭E[att$=」val」] {} 選擇具有att屬性且屬性值為以val結尾的字符串的E元素。

<style>div[class$="c"] { border: 2px solid #000;}</style><div>1</div><div>2</div><div>3</div>//將會命中1, 3兩個div，因為匹配到了class屬性，且屬性值以c結尾E[att*=」val」] {} 選擇具有att屬性且屬性值為包含val的字符串的E元素。

<style>div[class*="b"] { border: 2px solid #000;}</style><div>1</div><div>2</div><div>3</div>//將會命中所有div，因為匹配到了class屬性，且屬性值中都包含了bE[att|=」val」] {} 果元素E擁有att屬性，並且值為val，或者值是以val-開頭的，那麼E將會被選擇。

<style>div[class|="a"] { border: 2px solid #000;}</style><div>0</div><div>1</div><div>2</div><div>3</div>//在這個例子中，前2個div將會被命中：//第1個div，擁有class屬性，並且值為a，所以被命中；//第2個div，擁有class屬性，值是a開頭並緊跟著連接符「-」，所以被命中；css偽類選擇器：

:first-child 匹配父元素的第一個子元素。 :last-child 匹配父元素最後一個子元素 E:only-child 匹配父元素僅有的一個子元素el。 E:nth-of-type(n) 匹配同類型的第n個同級元素E。 :nth-child(n) 用於定位某個父元素的一個或者多個特定的子元素，「n」 是參數， 可以是整數，也可以是表達式（2n+1）(-n+3) 索引值從1開始，，也可是關鍵詞（odd）（even）;

註：當「:nth-child(n)」中的n為表達式時，n從0開始計算，當表達式的值為0或者小於0時，選擇器選擇不到任何相匹配的元素。如下表所示：