一、CSS選擇器常見的有幾種?
基本選擇器
- 通配選擇器 選擇文檔中所有的html元素，用一個
*表示 - 元素選擇器 選擇指定類型的的html元素
- ID選擇器 選擇指定ID屬性值為"id"的html元素，選擇的時候前面加上一個
#號 - 類選擇器 選擇指定class屬性值為"class"的任意多個html元素，選擇的時候前面加上一個
.號
層次選擇器
| 選擇器類型 | 選擇器 | 含義 | css |
|---|---|---|---|
| 多元素選擇器 | E,F | 選擇匹配E元素，F元素 | 1 |
| 后代選擇器 | E F | 選擇匹配E元素的F子元素 | 1 |
| 子孫選擇器 | E > F | 選擇匹配E元素下的直接子元素F | 2 |
| 相鄰兄弟選擇器 | E + F | 選擇匹配E元素后的直接相鄰元素F | 2 |
| 通用相鄰選擇器 | E ~ F | 選擇匹配E元素后的所有同級元素F | 3 |
偽類選擇器
| 選擇器 | 含義 | css |
|---|---|---|
| E:first-child | 匹配E元素的第一個子元素 | 2 |
| E:last-child | 匹配E元素的最后一個子元素 | 3 |
| E:root | 匹配E元素所在文檔的根元素 | 3 |
| E:nth-child(n) | 匹配E元素的第n個子元素 | 3 |
| E:nth-last-child(n) | 匹配E元素的倒數第n個子元素 | 3 |
| E:nth-of-type(n) | 匹配父元素內具有指定類型的第n個E元素 | 3 |
| E:nth-last-of-type(n) | 匹配父元素內具有指定類型的倒數第n個E元素 | 3 |
| E:first-of-type | 匹配父元素內具有指定類型的第一個E元素 | 3 |
| E:last-of-type | 匹配父元素內具有指定類型的最后一個E元素 | 3 |
| E:only-child | 匹配父元素內只包含一個子元素，且該子元素匹配E元素 | 3 |
| E:only-of-type | 匹配父元素內只包含一個同類型的子元素，且該子元素匹配E元素 | 3 |
| E:empty | 匹配沒有子元素的元素，且該元素五任何文本節點 | 3 |
| E:link | 匹配未被訪問過的超鏈接 | 1 |
| E:visited | 匹配被訪問過的超鏈接 | 1 |
| E:active | 匹配鼠標已經其上按下、還沒有釋放的E元素 | 1 |
| E:hover | 匹配鼠標停留其上的E元素 | 1 |
| E:focus | 匹配獲得焦點的E元素 | 2 |
| E:lang(language) | 匹配指定了lang屬性且值為language的E元素 | 2 |
| E:not(F) | 匹配所欲除F元素外的E元素 | 3 |
| E:checked | 匹配表單中被選中的radio（單選框）或checkbox（復選框）元素 | 3 |
| E:disabled | 匹配表單中禁用的元素 | 3 |
| E:enabled | 表單中激活的元素 | 3 |
| E:target | 匹配文檔中特定"id"點擊后的效果 | 3 |
偽元素選擇器
偽元素可用于定位文檔中包含的文本，為與偽類進行區分，偽元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。
| 選擇器 | 含義 | css |
|---|---|---|
| ::first-letter | 用來選擇文本塊的第一個字母 | 1 |
| ::first-line | 用來選擇元素的第一行文本 | 1 |
| ::before和::after | 不是指存在標記中的內容，而是可以插入額外內容的位置，需要配合content屬性使用 | 2 |
| ::selection | 用來匹配突出顯示的文本 | 3 |
屬性選擇器
| 選擇器 | 含義 | css |
|---|---|---|
| E[attr] | 匹配所有具有屬性attr的E元素 | 2 |
| E[attr=val] | 匹配具有屬性attr，attr值為val的元素，val區分大小寫 | 2 |
| E[attr~=val] | 匹配具有屬性attr，attr值具有多個空格分隔、其中一個值等于value的元素 | 2 |
| E[attr*=val] | 匹配具有屬性attr，attr值的任意位置包含了val的元素 | 3 |
| E[attr^=val] | 匹配具有屬性attr，attr值以val開頭的任何字符串的元素 | 3 |
| E[attr$=val] | 匹配具有屬性attr，attr值以val結尾的任何字符串 | 3 |
選擇器的優先級是怎樣的?
關于優先級的規定，常用的方法是給不同的選擇器分配權值：
!important
內聯樣式
id選擇器 100
類選擇器 10
偽類選擇器 10
屬性選擇器 10
標簽選擇器 1
通配符選擇器
瀏覽器自定義
- 權值較大的優先級越高
- 權值相同的，后定義的優先級較高
- 樣式值含有！important，優先級最高
后代選擇器的定位原則
后代選擇器，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。
比如DIV#divBox p span.red{color:red;}，瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到后，再查找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。
如果遇到一個屬性想知道兼容性，在哪查看?
可以去Can I use查詢
