摘要：加號(hào)相連的兩個(gè)選擇器實(shí)現(xiàn)同級(jí)緊鄰的元素選擇的功能。我最好的朋友是米老鼠。樣式緊挨的第一個(gè)同級(jí)元素是我最好的朋友是米老鼠。注意區(qū)分新增的屬性選擇器。是中新增的選擇器，用于標(biāo)示當(dāng)前處于活動(dòng)的錨標(biāo)記。選擇器的取反，這個(gè)很好理解。

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

CSS 選擇器非常豐富，現(xiàn)將 CSS 1 - 3 目前所有的選擇器列舉如下。

CSS 選擇器這么多，都需要掌握嗎？多嗎，分組去記憶還是很好掌握的，掌握的越多你就越能隨心所欲的操縱HTML文檔。

上面的選擇器只是基礎(chǔ)，掌握了上面的內(nèi)容，只能說(shuō)明你識(shí)字了，至于能不能組成句子，甚至優(yōu)美的句子還有很大的距離。

如何記住這么多選擇器呢？我個(gè)人記憶方式是，一是分組，二是使用，在此分享給大家。

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

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

通過(guò)使用特定的符號(hào)來(lái)連接選擇器可以實(shí)現(xiàn)更加豐富的選擇功能。

逗號(hào)連接兩個(gè)或多個(gè)選擇器實(shí)現(xiàn)多選的功能。

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

h1, h2 標(biāo)簽和 class="title" 的元素的字體顏色都設(shè)置為黑色。

空格直接相連的兩個(gè)或多個(gè)選擇器可以實(shí)現(xiàn)精確定位的功能。

#header h3 {
    color: #fff;
}

ID為header的元素下面的h3元素字體顏色設(shè)置為白色。

大于號(hào)連接的兩個(gè)選擇器實(shí)現(xiàn)父子選擇的功能。

HTML文檔片段

    
hello,job1...
    
hello,job2...
    

        
hi,job3...
    

hi,job4...

CSS樣式

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

.info下的所有直接子元素 p(帶有hello的段落)背景被設(shè)置為黃色，其余的(帶有hi的段落，不是子元素或不是直接子元素)不受影響。

加號(hào)相連的兩個(gè)選擇器實(shí)現(xiàn)同級(jí)緊鄰的元素選擇的功能。

HTML部分文檔

歡迎來(lái)到我到的主頁(yè)


我是唐老鴨。


我最好的朋友是米老鼠。

我的樣式會(huì)改變。

CSS樣式

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

div 緊挨的第一個(gè)同級(jí)元素 p 是“我最好的朋友是米老鼠?！保缓笥忠粋€(gè) + 連著 p 最終選中最后一個(gè) p.

波浪線連接的兩個(gè)選擇器實(shí)現(xiàn)同級(jí)并在其下面所有選擇器指定元素的選擇功能（好繞，看例子吧）。

HTML文檔

A div element.

  
Coffee
  
Tea
  
Milk


The first paragraph.

  
Coffee
  
Tea
  
Milk


Another list

  
Coffee
  
Tea
  
Milk

CSS樣式

p ~ ul{
    background:#ff0000;
}

p 元素同級(jí)的 ul 并且 ul 元素是在 p 的下面。

注意：這個(gè)是CSS3新增的選擇器。

結(jié)合的意思嘛，就是連著寫(xiě)在一起唄。

div#user {
    color: black;
}

我是黑色字體

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

也有一種多類(lèi)選擇器，也算選擇器結(jié)合

HTML文檔

This paragraph is very important.
This is a warning.
This paragraph is a very important warning.

CSS樣式

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

注意：在 IE7 之前的版本中，不能正確地處理多類(lèi)選擇器。

HTML標(biāo)簽可以定義若干屬性，我們可以通過(guò)屬性選擇器進(jìn)行元素的選取。

注意區(qū)分CSS3新增的屬性選擇器。

選取包含某屬性的元素。

a[href]

選取包含href屬性的a標(biāo)簽。

選擇某個(gè)屬性attribute并且屬性值為value的元素。

.info[ref="good"]

選擇某個(gè)屬性attribute并且屬性值中有value這個(gè)單詞的元素。

這里是指單詞，屬性值如果是 boy man 則有兩個(gè)單詞。

p[class~="man"]

屬性起始值為value的元素。

p[class|="cls"]

以上是CSS2開(kāi)始提供的屬性選擇器，下面的將是CSS3提供的選擇器，注意區(qū)別使用。

屬性值以value開(kāi)始的元素。

屬性值以value結(jié)尾的元素。

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

所謂的偽類(lèi)，你可以簡(jiǎn)單的理解為帶 : 的選擇器。偽類(lèi)很好理解，一般從名稱上就可以知道其作用了。

可以從以下幾個(gè)方面去記。下面的歸類(lèi)只用來(lái)方便記憶，這些選擇器并不局限于我所列舉的場(chǎng)景。

所有未被訪問(wèn)的鏈接。

鼠標(biāo)移動(dòng)到鏈接上面。

鼠標(biāo)點(diǎn)按在鏈接上不松開(kāi)。

鏈接已經(jīng)點(diǎn)擊過(guò)。

注意: 為了產(chǎn)生預(yù)期的效果，在CSS定義中，盡量采用上面四個(gè)的順序去定義。

是CSS3中新增的選擇器，用于標(biāo)示當(dāng)前處于活動(dòng)的錨標(biāo)記。

HTML文檔

This is a heading

Jump to New content 1
Jump to New content 2

Click on the links above and the :target selector highlight the current active HTML anchor.

New content 1...
New content 2...

CSS樣式

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

當(dāng)點(diǎn)擊錨定位a標(biāo)簽時(shí)，相應(yīng)的錨元素會(huì)設(shè)置為指定樣式。

選擇具有焦點(diǎn)的元素，一般都是輸入元素。

除了 :focus 是CSS2開(kāi)始有的，下面的都是CSS3新增的偽類(lèi)。

可用的輸入元素。

不可用的輸入元素。

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

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

不合法的。

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

匹配可選輸入元素。

匹配設(shè)置了“required”的元素。

input:required {
    background-color: yellow;
}

匹配可讀可寫(xiě)的元素。

匹配設(shè)置了“readonly”的元素。

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

readonly 和 disabled 可以實(shí)現(xiàn)同樣的功能，禁止用戶輸入和更改。

匹配設(shè)置范圍且值范圍超出范圍的元素。

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

匹配在設(shè)置值范圍內(nèi)的元素。

匹配被選中的元素。

先說(shuō)一下常用于 p 的：

第一個(gè)字母，一般用于實(shí)現(xiàn)首字母大寫(xiě)。

選取第一行。

比較通用的

在元素之前插入內(nèi)容。

在元素之后插入內(nèi)容。

示例

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

之前之后是指元素內(nèi)部的前面和后面。

::before
xxxx
::after

上面幾個(gè)是CSS1或2開(kāi)始支持的，下面的除了:first-child 是CSS2開(kāi)始的，其余的都是CSS3偽類(lèi)。

選擇文檔的根元素，基本就是 標(biāo)簽。

沒(méi)有任何子級(jí)（包括文本內(nèi)容）的元素。

父子關(guān)系偽類(lèi)有兩種，一種是*-type 的，作用于父元素，另一種是*-child的，作用于子元素，還是看例子好理解。

選取一個(gè)元素的父元素的第一個(gè)這個(gè)元素。

HTML文檔

This is a heading
The first paragraph.
The second paragraph.
The third paragraph.
The fourth paragraph.

CSS樣式

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

第一個(gè) p 標(biāo)簽將被設(shè)置背景色。p 的父元素是body,body的第一個(gè)p元素被選中。

這個(gè)元素的父元素的最后一個(gè)這個(gè)元素被選中。

這個(gè)元素的父元素只有一個(gè)這個(gè)元素，可以有其他元素不影響，唯一的這個(gè)元素被選中。

這個(gè)元素的父元素的第n個(gè)元素被選中。

n 可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。

數(shù)字：從1開(kāi)始，代表第一個(gè)元素

關(guān)鍵字：奇數(shù) odd 偶數(shù) even

表達(dá)式：公式（an+b） a 代表一個(gè)循環(huán)的大小，n是計(jì)數(shù)器（從0開(kāi)始），b是偏移量。

示例

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

奇數(shù)行（1,3,5,7...）設(shè)置背景。

從后往前計(jì)算。

說(shuō)完 type 該說(shuō) child 了。

這個(gè)是CSS2開(kāi)始有的偽類(lèi)選擇器，選取這個(gè)元素的第一個(gè)子元素。

示例

ul:first-child {
    color: blue;
}

讓ul的第一個(gè)li的字體為藍(lán)色。

最后一個(gè)子元素。

第幾個(gè)子元素，n配置同上。

從后開(kāi)始找子元素。

還剩下幾個(gè)，多帶帶列出來(lái)吧。

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

選擇器的取反，這個(gè)很好理解。

示例

:not(a) {
    color: black;
}

所有的非a標(biāo)簽。

匹配元素中被用戶選中或處于高亮狀態(tài)的部分。

示例

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

鼠標(biāo)拉選中的部分字體設(shè)置為紅色，背景設(shè)置為藍(lán)色。

后續(xù)會(huì)再跟進(jìn)和補(bǔ)充一些東西，先發(fā)這些吧。