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

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

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

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

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

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

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

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

通過使用特定的符號來連接選擇器可以實現(xiàn)更加豐富的選擇功能。

逗號連接兩個或多個選擇器實現(xiàn)多選的功能。

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

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

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

#header h3 {
    color: #fff;
}

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

大于號連接的兩個選擇器實現(xiàn)父子選擇的功能。

HTML文檔片段

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

        
hi,job3...
    

hi,job4...

CSS樣式

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

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

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

HTML部分文檔

歡迎來到我到的主頁


我是唐老鴨。


我最好的朋友是米老鼠。

我的樣式會改變。

CSS樣式

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

div 緊挨的第一個同級元素 p 是“我最好的朋友是米老鼠。”，然后又一個 + 連著 p 最終選中最后一個 p.

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

HTML文檔

A div element.

  
Coffee
  
Tea
  
Milk


The first paragraph.

  
Coffee
  
Tea
  
Milk


Another list

  
Coffee
  
Tea
  
Milk

CSS樣式

p ~ ul{
    background:#ff0000;
}

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

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

結合的意思嘛，就是連著寫在一起唄。

div#user {
    color: black;
}

我是黑色字體

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

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

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 之前的版本中，不能正確地處理多類選擇器。

HTML標簽可以定義若干屬性，我們可以通過屬性選擇器進行元素的選取。

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

選取包含某屬性的元素。

a[href]

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

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

.info[ref="good"]

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

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

p[class~="man"]

屬性起始值為value的元素。

p[class|="cls"]

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

屬性值以value開始的元素。

屬性值以value結尾的元素。

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

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

可以從以下幾個方面去記。下面的歸類只用來方便記憶，這些選擇器并不局限于我所列舉的場景。

所有未被訪問的鏈接。

鼠標移動到鏈接上面。

鼠標點按在鏈接上不松開。

鏈接已經(jīng)點擊過。

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

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

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;
}

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

選擇具有焦點的元素，一般都是輸入元素。

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

可用的輸入元素。

不可用的輸入元素。

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

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

不合法的。

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

匹配可選輸入元素。

匹配設置了“required”的元素。

input:required {
    background-color: yellow;
}

匹配可讀可寫的元素。

匹配設置了“readonly”的元素。

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

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

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

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

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

匹配被選中的元素。

先說一下常用于 p 的：

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

選取第一行。

比較通用的

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

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

示例

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

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

::before
xxxx
::after

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

選擇文檔的根元素，基本就是 標簽。

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

父子關系偽類有兩種，一種是*-type 的，作用于父元素，另一種是*-child的，作用于子元素，還是看例子好理解。

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

HTML文檔

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

CSS樣式

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

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

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

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

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

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

數(shù)字：從1開始，代表第一個元素

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

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

示例

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

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

從后往前計算。

說完 type 該說 child 了。

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

示例

ul:first-child {
    color: blue;
}

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

最后一個子元素。

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

從后開始找子元素。

還剩下幾個，多帶帶列出來吧。

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

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

示例

:not(a) {
    color: black;
}

所有的非a標簽。

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

示例

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

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

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