CSS 選擇器

概覽

在 CSS 中，選擇器用於選擇須要添加樣式的元素。

CSS 選擇器很是豐富，現將 CSS 1 - 3 目前全部的選擇器列舉以下。

選擇器	例子	例子描述	CSS版本
.class	.intro	選擇 class="intro" 的全部元素。	1
#id	#firstname	選擇 id="firstname" 的元素。	1
*	*	選擇全部元素。	2
element	p	選擇全部 <p> 元素。	1
selector,selector	div,p	選擇全部 <div> 元素和全部 <p> 元素。	1
selector selector	div p	選擇 <div> 元素內部的全部 <p> 元素。	1
selector>selector	div>p	選擇父元素爲 <div> 元素的全部 <p> 元素。	2
selector+selector	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
selector~selector	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> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素只有惟一的 <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> 元素。	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
:out-of-range	input:out-of-range	匹配值在指定區間以外的 <input> 元素。	3
:in-range	input:in-range	匹配值在指定區間以內的 <input> 元素。	3
:read-write	input:read-write	匹配可讀可寫的 <input> 元素。	3
:optional	input:optional	匹配可選輸入的 <input> 元素。	3
:required	input:required	匹配必須輸入的 <input> 元素。	3
:valid	input:valid	匹配輸入有效的 <input> 元素。	3
:invalid	input:invalid	匹配輸入無效的 <input> 元素。	3

CSS 選擇器這麼多，都須要掌握嗎？多嗎，分組去記憶仍是很好掌握的，掌握的越多你就越能爲所欲爲的操縱HTML文檔。

上面的選擇器只是基礎，掌握了上面的內容，只能說明你識字了，至於能不能組成句子，甚至優美的句子還有很大的距離。

記住並使用選擇器

如何記住這麼多選擇器呢？我我的記憶方式是，一是分組，二是使用，在此分享給你們。

基礎選擇器

類選擇器.class，ID選擇器#id，通配符選擇器*，元素選擇器element是四個最基本的選擇器，相信你早就記住了。

* {
    color: black;
}
a {
    color: blue;
}
.msg {
    color: red;
}
#top {
    background-color: #ff0000;
}

選擇器組合

經過使用特定的符號來鏈接選擇器能夠實現更加豐富的選擇功能。

selector, selector

逗號鏈接兩個或多個選擇器實現多選的功能。

h1, h2, .title {
    color: black;
}

h1, h2 標籤和 class="title" 的元素的字體顏色都設置爲黑色。

selector selector

空格直接相連的兩個或多個選擇器能夠實現精肯定位的功能。

#header h3 {
    color: #fff;
}

ID爲header的元素下面的h3元素字體顏色設置爲白色。

selector > selector

大於號鏈接的兩個選擇器實現父子選擇的功能。

HTML文檔片斷

<div class="info">
    <p>hello,job1...</p>
    <p>hello,job2...</p>
    <div>
        <p>hi,job3...</p>
    </div>
</div>
<p>hi,job4...</p>

CSS樣式

.info > p {
    background-color: yellow;
}

.info下的全部直接子元素 p(帶有hello的段落)背景被設置爲黃色，其他的(帶有hi的段落，不是子元素或不是直接子元素)不受影響。

selector + selector

加號相連的兩個選擇器實現同級緊鄰的元素選擇的功能。

HTML部分文檔

<h1>歡迎來到我到的主頁</h1>

<div>
<p>我是唐老鴨。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<p>個人樣式會改變。</p>

CSS樣式

div + p + p {
    background-color: yellow;
}

div 緊挨的第一個同級元素 p 是「我最好的朋友是米老鼠。」，而後又一個 + 連着 p 最終選中最後一個 p.

selector ~ selector

波浪線鏈接的兩個選擇器實現同級並在其下面全部選擇器指定元素的選擇功能（好繞，看例子吧）。

HTML文檔

<div>A div element.</div>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<p>The first paragraph.</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<h2>Another list</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

CSS樣式

p ~ ul{
    background:#ff0000;
}

p 元素同級的 ul 而且 ul 元素是在 p 的下面。

注意：這個是CSS3新增的選擇器。

選擇器結合

結合的意思嘛，就是連着寫在一塊兒唄。

div#user {
    color: black;
}

<div id="user">我是黑色字體</div>

經常使用的就是 element#id,element.class.

也有一種多類選擇器，也算選擇器結合

HTML文檔

<p class="important">This paragraph is very important.</p>
<p class="warning">This is a warning.</p>
<p class="important warning">This paragraph is a very important warning.</p>

CSS樣式

.important {font-weight: bold;}
.warning {font-style: italic;}
.important.warning {background: silver;}

注意：在 IE7 以前的版本中，不能正確地處理多類選擇器。

屬性選擇器

HTML標籤能夠定義若干屬性，咱們能夠經過屬性選擇器進行元素的選取。

注意區分CSS3新增的屬性選擇器。

[attribute]

選取包含某屬性的元素。

a[href]

選取包含href屬性的a標籤。

[attribute=value]

選擇某個屬性attribute而且屬性值爲value的元素。

.info[ref='good']

[attribute~=value]

選擇某個屬性attribute而且屬性值中有value這個單詞的元素。

這裏是指單詞，屬性值若是是 boy man 則有兩個單詞。

p[class~='man']

[attribute|=value]

屬性起始值爲value的元素。

p[class|='cls']

以上是CSS2開始提供的屬性選擇器，下面的將是CSS3提供的選擇器，注意區別使用。

[attribute^=value]

屬性值以value開始的元素。

[attribute$=value]

屬性值以value結尾的元素。

[attribute*=value]

屬性值包含value的元素，不必定是單詞喲。

僞類選擇器

所謂的僞類，你能夠簡單的理解爲帶 : 的選擇器。僞類很好理解，通常從名稱上就能夠知道其做用了。

能夠從如下幾個方面去記。下面的歸類只用來方便記憶，這些選擇器並不侷限於我所列舉的場景。

跟 a 緊密關聯的

a:link

全部未被訪問的連接。

a:hover

鼠標移動到連接上面。

a:active

鼠標點按在連接上不鬆開。

a:visited

連接已經點擊過。

注意: 爲了產生預期的效果，在CSS定義中，儘可能採用上面四個的順序去定義。

:target

是CSS3中新增的選擇器，用於標示當前處於活動的錨標記。

HTML文檔

<h1>This is a heading</h1>

<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>

<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>

<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>

CSS樣式

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

當點擊錨定位a標籤時，相應的錨元素會設置爲指定樣式。

跟 input 緊密關聯的

:focus

選擇具備焦點的元素，通常都是輸入元素。

除了 :focus 是CSS2開始有的，下面的都是CSS3新增的僞類。

:enabled

可用的輸入元素。

:disabled

不可用的輸入元素。

input[type="text"]:disabled {
    background:#dddddd;
}

<input type="text" disabled="disabled" value="Disneyland" />

:valid

匹配輸入合法的元素，例如：email,number等等。

:invalid

不合法的。

input:invalid {
    border:2px solid red;
}

<input type="email" value="supportEmail" />

:optional

匹配可選輸入元素。

:required

匹配設置了「required」的元素。

input:required {
    background-color: yellow;
}

<input type="text" required />

:read-write

匹配可讀可寫的元素。

:read-only

匹配設置了「readonly」的元素。

input:read-only {
    background-color: yellow;
}

<input type="text" readonly value="hello" />

readonly 和 disabled 能夠實現一樣的功能，禁止用戶輸入和更改。

:out-of-range

匹配設置範圍且值範圍超出範圍的元素。

input:out-of-range {
    border:2px solid red;
}

<input type="number" min="5" max="10" value="17" />

:in-range

匹配在設置值範圍內的元素。

:checked

匹配被選中的元素。

父子及排序關係相關

先說一下經常使用於 p 的：

:first-letter

第一個字母，通常用於實現首字母大寫。

:first-line

選取第一行。

比較通用的

:before

在元素以前插入內容。

:after

在元素以後插入內容。

示例

p:before {
    content:"Read this -";
}

以前以後是指元素內部的前面和後面。

<p>
::before
xxxx
::after
</p>

上面幾個是CSS1或2開始支持的，下面的除了:first-child 是CSS2開始的，其他的都是CSS3僞類。

:root

選擇文檔的根元素，基本就是 <html> 標籤。

:empty

沒有任何子級（包括文本內容）的元素。

父子關係僞類有兩種，一種是*-type 的，做用於父元素，另外一種是*-child的，做用於子元素，仍是看例子好理解。

:first-of-type

選取一個元素的父元素的第一個這個元素。

HTML文檔

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

CSS樣式

p:first-of-type {
    background:#ff0000;
}

第一個 p 標籤將被設置背景色。p 的父元素是body,body的第一個p元素被選中。

:last-of-type

這個元素的父元素的最後一個這個元素被選中。

:only-of-type

這個元素的父元素只有一個這個元素，能夠有其餘元素不影響，惟一的這個元素被選中。

:nth-of-type(n)

這個元素的父元素的第n個元素被選中。

n 能夠是一個數字，一個關鍵字，或者一個公式。

• 數字：從1開始，表明第一個元素

• 關鍵字：奇數 odd 偶數 even

• 表達式：公式（an+b） a 表明一個循環的大小，n是計數器（從0開始），b是偏移量。

示例

tr:nth-of-type(2n+1) {
    background:#ff0000;
}

奇數行（1,3,5,7...）設置背景。

:nth-last-of-type(n)

從後往前計算。

說完 type 該說 child 了。

:first-child

這個是CSS2開始有的僞類選擇器，選取這個元素的第一個子元素。

示例

ul:first-child {
    color: blue;
}

讓ul的第一個li的字體爲藍色。

:last-child

最後一個子元素。

:nth-child(n)

第幾個子元素，n配置同上。

:nth-last-child(n)

從後開始找子元素。

還剩下幾個，單獨列出來吧。

其餘

:lang(language)

選取lang屬性的起始值爲language的元素。

:not(selector)

選擇器的取反，這個很好理解。

示例

:not(a) {
    color: black;
}

全部的非a標籤。

::selection

匹配元素中被用戶選中或處於高亮狀態的部分。

示例

::selection {
    color:#ff0000;
    background-color:blue;
}

鼠標拉選中的部分字體設置爲紅色，背景設置爲藍色。

後續會再跟進和補充一些東西，先發這些吧。