CSS 選擇器參考手冊

CSS 選擇器

在 CSS 中，選擇器是一種模式，用於選擇需要添加樣式的元素。

"CSS" 列指示該屬性是在哪個 CSS 版本中定義的。（CSS1、CSS2 還是 CSS3。）

選擇器	例子	例子描述	CSS
.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。	1
element>element	div>p	選擇父元素爲 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素之後的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動鏈接。	1
:hover	a:hover	選擇鼠標指針位於其上的鏈接。	1
:focus	input:focus	選擇獲得焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。	2
:before	p:before	在每個 <p> 元素的內容之前插入內容。	2
:after	p:after	在每個 <p> 元素的內容之後插入內容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。	3
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計數。	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啓用的 <input> 元素。	3
:disabled	input:disabled	選擇每個禁用的 <input> 元素	3
:checked	input:checked	選擇每個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

Css3選擇器

1.常用選擇器

1.1標籤選擇器

p{ }/*選擇標籤名爲p的元素*/

1.2類選擇器

.box{ }/*選擇class名爲box的元素*/

1.3ID選擇器

#pid{ }/*選擇id名爲pid的元素*/

1.4通配符選擇器

*{ }/*選擇頁面中所有的元素*/

1.5選擇器前綴

div.bd{}/*選中class名爲bd且標籤爲div的元素*/

1.6屬性選擇器

[disabled]{}/*選擇帶有屬性disabled的所有元素*/
[type=button]{}/*選擇type屬性爲button的所有元素*/
[class~=sports]{}/*選擇class屬性包含sports所有元素*/
[lang|=en]{  }/*選擇以lang屬性以"en"開頭以及以"-"分隔的所有元素*/
a[href^="#"]{ }/*選擇href屬性以"#"開頭的a元素*/
[href$="pdf"]{  }/*選擇href屬性以"pdf"結尾的元素*/
[href*="lady.163.com"]{}/*選擇href屬性中包含"lady.163.com"的元素*/

2.僞類選擇器

2.1鏈接僞類

/*前兩個只可用於描元素（鏈接）*/
a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
/*後兩個可以用於其它元素*/
a:hover {color:#FF00FF;}    /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

鏈接在進行設置時： a:hover 必須位於 a:link 和 a:visited 之後, a:active必須位於 a:hover 之後。

2.2動態僞類

input:focus{}/*設置input元素獲得焦點後的樣式*/
input:enabled{}/*元素可用的狀態*/
input:disabled{}/*元素不可用的狀態，屬性選擇器[disabled]的簡寫*/
input:checked{}/*單選框或者複選框選擇的樣式*/

2.3樹形圖上的僞類html結構如下：

<ul>
    <li>1</li>
    <li>2</li>
    <li><a href="#">3</a></li>
    <li>4</li>
    <p>5</p>
</ul>

選擇符：

ul:first-child{}/*選擇第一個ul下第一個標籤（css2定義，支持ie7）在處理margin時很有用*/

/*以下全是CSS3新增的僞類*/
ul:last-child{}/*選擇最後一個li標籤*/
ul:nth-child(n){}/*選擇()內的表達式如：[2n+1]，或者數字所代表的li標籤*/
ul:nth-last-child(n)/*同上，反向選擇*/
ul:only-child{}/*選擇ul只有一個子元素的項，這裏會選中第三個li下的a標籤*/
ul:first-of-type{}/*選擇第一個該類型的標籤，會選擇第一個li和p*/
ul:last-of-type{}/*選擇最後一個該類型的標籤，會選擇第四個li和p*/
ul:nth-last-of-type(2n){  }/*倒數的選擇(.)內的表達式[2n]，或數字所代表的該類型標籤。選擇第一個和第三個li標籤*/
ul:only-of-type{}/*選擇ul下中只有一個該類型的項，會選中a標籤和p標籤*/
:root{}/*選擇文檔的根元素*/
ul:not(li){}/*選擇不含有li標籤的元素，這裏會選中a標籤和p元素*/
ul:empty{}/*匹配ul下沒有任何子元素（包括text節點）的元素，這裏匹配不到，把p標籤中的5刪除，可匹配成功*/
E:target{}/*匹配相關URL（錨點）指向的元素。*/

3.僞元素選擇器

::first-letter{}/*選擇第一個字母*/
::first-line{}/*選擇第一行*/
::before{content:"before";}/*在某個元素之前插入一些內容*/
::after{content:"after";}/*在某個元素後插入一些內容*/
::selection{}/*設置於被用戶選中時的樣式*/
::placeholder{}/*設置對象文字佔位符的樣式*/

4.組合選擇器

4.1後代選擇器

.main h2{  }/*選擇class名爲mian元素內的所有h2標籤*/

4.2子選擇器

.main>h2{  }/*選擇class名爲mian元素內的直接關聯與父元素的h2標籤*/

4.3相連選擇器

h2~p{}/*只要P標籤前有h2標籤便選擇*/

4.4兄弟選擇器

h2~p{}/*選擇h2標籤後出現的所有p標籤*/

4.4選擇器分組

h1,h2,h3{backgound-color:#ddd;}/*同時設置h1,h2,h3標籤,使用","分隔*/

5.繼承

body{font-family:"Microsoft Yahei";}/*設置頁面中所有的字體爲微軟雅黑*/

• 繼承屬性
  • color
  • font
  • text-align
  • list-style
  • …
• 非繼承屬性
  • background
  • border
  • position
  • …

6.CSS優先級

• 計算方法
  • a = 行內樣式
  • b = ID選擇器的數量
  • c = 類/僞類和屬性選擇器的數量
  • d = 標籤選擇器和僞元素選擇器數量

value = a 1000 + b 100 + c*10 +d

!important 強行提升優先級