CSS選擇器類型總結
1.通用選擇器
一般用於給所有元素做一些通用性的樣式設置，比如清除內邊距、外邊距等。但是效率比較低，盡量不要使用。
* {
margin: 0;
padding: 0;
}
2.元素選擇器
也叫做“標簽選擇器”，用於選中一類標簽進行樣式設置。
div { color: #ff0000; }
span { font-size: 18px; }
3.類選擇器
給元素添加class屬性，通過
.class屬性值來選中元素。
- 一個元素可以有多個class值，每個class值之間用空格隔開；
- class值如果由多個單詞組成，單詞之間可以用
中划線-、下划線_，也可以使用駝峰標識； - 最好不要用標簽名作為class值；
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
}
<div class="box"></div>
4.id選擇器
給元素添加id屬性，通過
#id屬性值來選中元素。
- 一個HTML文檔里面的id值是唯一的，不能重復；
- id值如果由多個單詞組成，單詞之間可以用
中划線-、下划線_，也可以使用駝峰標識； - 最好不要用標簽名作為id的值；
#container { color: #ff0000; }
<div id="container"></div>
5.屬性選擇器
-
[attr]：選中擁有attr屬性的元素；/* 選中擁有title屬性的元素 */ [title]: { color: #ff0000; }<div title="one">內容</div> -
[attr=val]：選中attr屬性值恰好等於val的元素；/* 選中title值恰好等於one的元素 */ [title="one"] { color: #ff0000; }<div title="one">內容</div> -
[attr*=val]：選中attr屬性值包含單詞val的元素；/* title屬性值包含單詞one的元素 */ [title*="one"] { color: #ff0000; }<div title="one">內容1</div> <p title="aaaone">內容2</p> <span title="one-two">內容3</span> -
[attr^=val]：選中attr屬性值以val開頭的元素；/* title屬性值以單詞one開頭的元素 */ [title^="one"] { color: #ff0000; }<div title="one">內容1</div> <span title="one-two">內容2</span> <p title="one two">內容3/p> -
[attr|=val]：選中attr屬性值恰好等於val或以單詞val開頭后面緊跟連字符-的元素；/* title屬性值恰好等於one或者以單詞one開頭且后面跟着連字符-的元素 */ [title|="one"] { color: #ff0000; }<div title="one">內容1</div> <span title="one-two">內容2</span> -
[attr~=val]：選中attr屬性值包含單詞val的元素（單詞之間必須用空格隔開）；/* title屬性值包含單詞one的元素（單詞one與其他單詞之間必須用空格隔開） */ /* 效果類似於類選擇器 */ [title~="one"] { color: #ff0000; }<div title="one">內容1</div> <p title="one two">內容2</p> -
[attr$=val]：選中attr屬性值以單詞val結尾的元素；/* title屬性值以單詞one結尾的元素 */ [title$="one"] { color: #ff0000; }<div title="two-one">內容1</div> <p title="two one">內容2</p>
6.后代選擇器
選擇指定元素下的子元素，包括直接和間接子元素，使用空格進行隔開。
/* 選擇div下所有span元素 */
div span { color: #ff0000; }
<div>
<span>文字內容1</span>
<p>
<span>文字內容2</span>
</p>
</div>
7.子代選擇器
選擇指定元素下的直接子元素，不包括間接子元素，使用
>。
/* 選擇div元素下的直接span元素 */
div > span { color: #ff0000; }
<div>
<span>文字內容1</span>
</div>
8.兄弟選擇器
-
相鄰兄弟選擇器
+：選擇某元素后面緊挨的兄弟元素；/* div元素后面緊挨的p元素 */ div + p { color: #ff0000; }<div></div> <p>內容</p> -
全兄弟選擇器
~：選擇某元素后面的兄弟元素，不需要緊挨；/* div元素后面的p元素 */ div ~ p { color: #ff0000; }<div></div> <p>內容1</p> <p>內容2</p>
9.交集選擇器
選擇同時符合多個條件的元素。
/* 選擇div元素且class為one的 */
div.one { color: #ff0000; }
/* 選擇div元素且class為one且title屬性值等於one的 */
div.one[title="one"] { color: #ff0000; }
<div class="one" >內容1</div>
<div class="one" title="one">內容2</div>
10.並集選擇器
不同選擇條件，中間用
,連接，進行全部選中。
/* 所有的div元素 + 所有class值有one的元素 + 所有title屬性值等於one的元素 */
div, .one, [title="one"] { color: #ff0000; }
<div>內容1</div>
<span title="one">內容2</span>
<p class="one">內容3</p>
11.偽類選擇器
11.1.動態偽類
:link：a:link未訪問的鏈接；:visited：a:visited已訪問的鏈接；:hover：a:hover鼠標移動到鏈接上；:active：a:active激活的鏈接（鼠標在鏈接上長按未松開）；:focus：當前擁有輸入焦點的元素（能接收鍵盤的輸入，一般為input）；
注意點：
:hover必須放在:link和:visited后面才能完全生效；:active必須放在:hover后面才能完全生效；- 建議編寫順序：link、visited、focus、hover、active；
- 處理a元素，
:hover和:active也能用於其他元素；
11.2.目標偽類和語言偽類
-
目標偽類：
:target； -
語言偽類：
:lang；
11.4.元素狀態偽類
:enabled：可用的；:disable：禁用的；:checked：選中的；
11.5.結構偽類
-
:nth-child(n)：父元素中的第n個子元素（n代表任意正整數和0，也可用even（偶數）和odd（奇數））；/* 選中所有父元素下的第一個為p的元素 */ p:nth-child(1) { color: #ff0000; } -
:nth-last-child(n)：與:nth-child相反，父元素中倒數第n個子元素；/* 選中父元素下倒數第一個為p的元素 */ p:nth-last-child(1) { color: #ff0000; } /* 選中最后兩個為p的元素 */ p:nth-last-child(-n + 2) { color: #ff0000; } -
nth-of-type(n)：計數時只計算同種類型的元素；/* 選中父元素下所有p元素中的第二個p元素 */ p:nth-of-type(2) { color: #ff0000; } -
:nth-last-of-type(n)：從后往前計算同種類型的元素；/* 選中父元素下所有p元素中倒數第二個p元素 */ p:nth-last-of-type(2) { color: #ff0000; } -
:first-child：等同於:nth-child(1)； -
:last-child：等同於:nth-last-child(1)； -
:first-of-type：等同於:nth-of-type(1)； -
:last-of-type：等同於:nth-last-of-type(1)； -
:only-child：是父元素中唯一的子元素； -
:only-of-type：是父元素中唯一的指定類型的元素； -
:empty：里面完全空白的元素，不包含子元素和內容； -
:root：根元素，就是html元素；
11.6.否定偽類
:not()的格式是：not(x)表示除x以外的元素（x表示簡單的選擇器，可以是元素、通用、屬性、類、id、偽類（除否定偽類）選擇器等）。
/* 選中父元素下所有p元素不是第一個和最后一個的p元素 */
p:not(:first-of-type):not(:last-of-type) { color: #ff0000; }
注意：:not()只支持簡單選擇器，不支持組合選擇器，比如交集和並集選擇器等。