? ? ? css選擇器家族是css家族的一個分支，它的使命是精確捕捉到上頭要的特定html元素赂鲤，協(xié)助css家族其他樣式族人為其設置樣式噪径，從而實現(xiàn)css家族的偉大復興。

? ? ? css選擇器家族內(nèi)部有不同功派分支数初，它們各個身懷絕技找爱。

? ? ? 元素選擇器分支最基礎，它們根據(jù)html預定義標簽進行捕獲泡孩；

? ? ? 派生選擇器分支對元素之間的關系了如指掌车摄，它們根據(jù)html元素位置定位選擇；

? ? ? 屬性選擇器分支和屬性家族合作定位選擇，天網(wǎng)恢恢吮播，其中屬性選擇器門派又中獨立出兩大分支：類選擇器和id選擇器变屁，分別根據(jù)類名和id名定位選擇；

? ? ? 偽類選擇器分支個性鮮明意狠，它們另辟蹊徑粟关，可以根據(jù)元素的不同狀態(tài)進行選擇。

? ? ? 我是瞎扯和正文的分割線环戈。

元素選擇器|類型選擇器-html元素本身定位

派生選擇器(contextual selectors)-根據(jù)上下文關系定位

1.后代選擇器|包含選擇器（descendant selector）-嵌套關系闷板，一層或多層

? ?article p {} ? ?//選中article標簽內(nèi)部嵌套的所有p

2.子選擇器（Child selectors）-嵌套關系，一層

? ? article > p{} ?//選中article標簽內(nèi)部嵌套的第一層p

3.相鄰兄弟選擇器（Adjacent sibling selector）-平級關系院塞，緊接在一元素后面的元素

? ?article + p {} ?//選中緊鄰在article標簽下面的p,如果article后面緊鄰的不是p遮晚，失效。

? ?后代選擇器的影響一統(tǒng)江湖拦止，千秋萬代县遣；子選擇器只認親兒子；相鄰兄弟選擇器只認跟在自己屁股后邊兒的兄弟汹族。

例子1 ? table.company td > p?

? ?td元素所有子元素萧求，其中td元素包含于類名為company的table

例子2 ? html > body table + ul

? ?緊跟在table后邊出現(xiàn)的ul，其中table包含于body鞠抑，而body是html的子元素

屬性選擇器-和各種屬性合作定位饭聚，定位符‘[]’

以title屬性為例

[title] ? ? ? ? ?選中帶有title屬性的元素

[title][href] ?a選中既有title又有href的a元素

[title="tt"] ? ?選中有title屬性忌警，并且title屬性值為“tt”的元素搁拙，必須完全匹配

[title~="tt"] ?屬性名以空格分隔 && 屬性名包含"tt"的元素,比如屬性為“tt t1”的元素

? ? ? ? ? ? ? ? ? 多類選擇器只能用于class，~=可以用于所有屬性的多選擇

? ? ? ? ? ? ? ? ? p[class~='class1'] 可以匹配到p.class1.class2

[title|="tt"] ? 屬性名以連字符分隔 && 屬性名包含"tt"的元素,比如屬性為"tt-t1"的元素7

? ? ? ? ? ? ? ? ? 匹配語言en法绵，en-us箕速，en-au

[title^="tt"] ? 屬性名以“tt”開頭的元素，無論空格朋譬、分隔符還是其他

[title$="tt"] ? 屬性名以“tt”結尾的屬性盐茎，無論連字符是空格、分隔符還是其他

[title*="tt"] ? ?屬性名包含“tt”的元素徙赢，無論連字符是空格字柠、分隔符還是其他

? ? ? ? ? ? ? ? ? ? 匹配網(wǎng)址，a[href*="w3school.com.cn"]可以匹配到http://w3school.com.cn/html;https://w3school.com.cn/css/;

id選擇器-和id屬性合作定位狡赐，定位符‘#’

#myIDVSdiv#myID選中id為‘myID’的元素 VS 選中id為‘myID’的div元素

老版本的 Windows/IE 瀏覽器可能會忽略‘#myID’只認識后面('div#myID')

ID 屬性不允許有以空格分隔的詞列表

類選擇器-和class屬性合作定位窑业，定位符‘.’

.fancy tdVStd.fancy選中包含于類名為fancy的元素的所有td VS 類名為fancy的td元素

class屬性允許有以空格分隔的詞列表,多類選擇器.fancy.fancy1

偽類選擇器(Pseudo-classes)

selector : pseudo-class|pseudo-element {property: value}

1. ?錨偽類，a

a:link ? ? ? 未被訪問的鏈接

a:visited ? 已被訪問的鏈接

a:hover ? ?鼠標移動到鏈接

a:active ? 鏈接被點擊的時刻

2. ?:first-child偽類

p:first-child ?選中作為某元素第一個子元素的所有 p 元素

3. ?:focus偽類

input:focus{ background-color: yellow;}

4. ?:lang偽類

q:lang(no){ quotes: "~" "~"} ? ?<q lang="no">引用</q>的表現(xiàn)由 ?"引用" => ~引用~

5. ?:first-letter ?| ?:first-line

? ? ? p:first-letter | ?p:first-line 向段落首字母或首行添加樣式

6. ?:before ?| ?:after

? ? ? 在元素之前|之后插入一個元素

? ? ? h1:before{ ?content: url("/img/a.jpg");}

? ? ? 在h1前面插入一個圖片枕屉，也可以插入一段音頻等