CSS選擇器及其權重

基本選擇器

選擇器	描述
*	匹配所有元素
E	匹配所有E標籤
.app	匹配所有class="app"的元素
#app	匹配id="app"的元素，僅一個

組合選擇器

選擇器	描述
A，B	並列選擇器,匹配A和B
A B	後代選擇器,匹配A包裹的所有B元素
A > B	子元素選擇器,匹配A包裹的兒子元素B
A + B	相鄰選擇器,匹配所有緊隨A元素之後的同級元素B
A ~ B	後兄弟選擇器,匹配任何A標籤之後的同級B標籤

屬性選擇器

選擇器	描述
E[attribute]	具有attribute屬性的E元素，E可省略
E[attribute = value]	attribute屬性值爲value的E元素
E[attribute ~= value]	匹配所有attribute屬性具有多個空格分隔的值、其中一個值等於“value”的E元素
E[attribute ^= value]	attribute屬性值以value開頭的E元素
E[attribute $= value]	attribute屬性值以value結尾的E元素
E[attribute *= value]	attribute屬性值包含value字符串的E元素
[attribute |= value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞

~=和*=區別，~=匹配空格包含的整個值，*=匹配字符串是否包含字符串，例如以下輸出結果爲紅色背景，字體顏色未生效，

<div class="abcd" >test</div>

div[class*=abc] {
            background-color: red;
}
div[class~=abc] {
    color: green;
}

僞類選擇器

選擇器	描述
E:first-child	第一個子元素E
E:nth-child(n)	第n個子元素E
E:link	未被點擊的鏈接
E:hover	鼠標懸停在E上的效果
E:active	鼠標點擊還未釋放的效果
E:visited	點擊過的鏈接
E:focus	獲得當前焦點的E元素
E:target	特定id的元素點擊後的效果
E:lang©	lang屬性等於c的E元素
E:enabled	表單中激活的E元素
E:disabled	表單中禁用的E元素
E:checked	表單中選中的元素
E::selection	匹配被用戶選取的選取的部分
E:not(:nth-child(n))	除了第n個的其它E元素

target僞類選擇器使用方式：

:target{
    border: 2px solid #D4D4D4;
    background-color: green;
}

<!-- 點擊後對應id的樣式會改變 -->
<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>

<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>

僞元素選擇器

選擇器	描述
E:first-line	E標籤第一行
E:first-letter	E標籤內第一個字母
E:before	E前面插入內容
E:after	E後面插入內容

注：::before和::after在CSS3引入，作用與:before和:after相同

優先級：id > class > 標籤 > 相鄰選擇器 > 子選擇器 > 後代選擇器 > * > 屬性選擇器 > 僞類選擇器