總結30個CSS3選擇器

或許你們平時老是在用的選擇器都是：#id  .class  以及標籤選擇器。但是這些還遠遠不夠，爲了在開發中更加駕輕就熟，本文總結了30個CSS3選擇器，但願對你們有所幫助。
1 *：通用選擇器

* { margin:0; padding:0;  }

*選擇器是選擇頁面上的所有元素，上面的代碼做用是把所有元素的margin和padding設爲0，最基本的清除瀏覽器默認樣式的方法。
*選擇器也能夠應用到子選擇器中，例以下面的代碼：

#container * { border:1px solid black;  }

這樣ID爲container 的全部子標籤元素都被選中了，而且設置了border。
2 #id：id選擇器

#container { width: 960px; margin: auto;
}

id

選擇器是很嚴格的而且你沒辦法去複用它。使用的時候你們仍是得至關當心的。須要問本身一下：我是否是必需要給這個元素來賦值個id來定位它呢？
3 .class：類選擇器

.error { color: red;
}

這是個

class

選擇器。它跟

id

選擇器不一樣的是，它能夠定位多個元素。當你想對多個元素進行樣式修飾的時候就可使用

class

。當你要對某個特定的元素進行修飾那就是用

id

來定位它。
4 selector1 selector2：後代選擇器

li a { text-decoration: none;
}

後代選擇器是

比較經常使用的

選擇器。若是你想更加具體的去定位元素，你可使用它。例如，假如，你不須要定位全部的

a

元素，而只須要定位

li

標籤下的

a

標籤？這時候你就須要使用

後代

選擇器了。
提示：若是你的選擇器像

X Y Z A B.error

這樣，那你就錯了。時刻都提醒本身，是否真的須要對那麼多元素修飾。
5 tagName：標籤選擇器

a { color: red; } ul { margin-left: 0; }

若是你想定位頁面上全部的某標籤，不是經過

id

或者是’class’，這簡單，直接使用類型選擇器。
6 selector:link  selector:visited  selector:hover  selector:active  僞類選擇器

通常狀況下selector都爲a標籤，以上四種僞類選擇器表明的意思以下：
link:鏈接日常的狀態。
visited:鏈接被訪問過以後。
hover:鼠標放到鏈接上的時候。
active:鏈接被按下的時候。

未移入a標籤連接時：link
移入a標籤連接時：link、hover
點擊a標籤連接時：link、hover、active
點擊後未移入a標籤鏈接時：link、visited
點擊後移入a標籤鏈接時：link、visited、hover
點擊後再次點擊a標籤鏈接時：link、visited、hover、active
這個就是全部組合的樣式了。
若是有多個一樣的樣式，後面的樣式會覆蓋前面的樣式，因此這四個僞類的定義就有順序的要求了，而你們所說的‘lvha’也是由於這個緣由。 7 selector1 + selector2 ：相鄰選擇器

ul + p { color: red;
}

它只會選中指定元素的直接後繼元素。上面那個例子就是選中了全部

ul

標籤後面的第一段，並將它們的顏色都設置爲紅色。
8 selector1 > selector2 : 子選擇器

div#container > ul { border: 1px solid black;
}

它與差異就是後面這個指揮選擇它的直接子元素。看下面的例子

<div id="container">
   <ul>
      <li> List Item <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

#container > ul

只會選中

id

爲’container’的

div

下的全部直接

ul

元素。它不會定位到如第一個

li

下的

ul

元素。
因爲某些緣由，使用子節點組合選擇器會在性能上有許多的優點。事實上，當在javascript中使用

css

選擇器時候是強烈建議這麼作的。
9 selector1 ~ selector2 : 兄弟選擇器

ul ~ p { color: red;
}

兄弟節點組合選擇器跟

相鄰選擇器

很類似，而後它又不是那麼的嚴格。

ul + p

選擇器只會選擇緊挨跟着指定元素的那些元素。而這個選擇器，會選擇跟在目標元素後面的全部匹配的元素。

10 selector[title] : 屬性選擇器

a[title] { color: green;
}

上面的這個例子中，只會選擇有title屬性的元素。那些沒有此屬性的錨點標籤將不會被這個代碼修飾。
11 selector[href="foo"] : 屬性選擇器

a[href="http://strongme.cn"] { color: #1f6053; /* nettuts green */
}

上面這片代碼將會把

href

屬性值爲

http://strongme.cn

的錨點標籤設置爲綠色，而其餘標籤則不受影響。
注意：咱們將值用雙引號括起來了。那麼在使用Javascript的時候也要使用雙引號括起來。能夠的話，儘可能使用標準的CSS3選擇器。
12 selector[href*=」strongme」] : 屬性選擇器

a[href*="strongme"] { color: #1f6053;
}

指定了

strongme

這個值必須出如今錨點標籤的

href

屬性中，不論是

strongme.cn

仍是

strongme.com

仍是

www.strongme.cn

均可以被選中。
可是記得這是個很寬泛的表達方式。若是錨點標籤指向的不是

strongme

相關的站點，若是要更加具體的限制的話，那就使用

^

和

$

，分別表示字符串的開始和結束。
13 selector[href^=」href」] : 屬性選擇器

a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;
}

你們確定好奇過，有些站點的錨點標籤旁邊會有一個外鏈圖標，我也相信你們確定見過這種狀況。這樣的設計會很明確的告訴你會跳轉到別的網站。
用克拉符號就能夠輕易作到。它一般使用在正則表達式中標識開頭。若是咱們想定位錨點屬性

href

中以

http

開頭的標籤，那咱們就能夠用與上面類似的代碼。
注意咱們沒有搜索http://，那是不必的，由於它都不包含https://。
14 selector[href$=」.jpg」] : 屬性選擇器

a[href$=".jpg"] { color: red;
}

此次咱們又使用了正則表達式

$

，表示字符串的結尾處。這段代碼的意思就是去搜索全部的圖片連接，或者其它連接是以

.jpg

結尾的。可是記住這種寫法是不會對

gifs

和

pngs

起做用的。
15 selector[data-*=」foo」] : 屬性選擇器

a[data-filetype="image"] { color: red;
}

回到上一條，咱們如何把全部的圖片類型都選中呢

png

,

jpeg

,’jpg’,’gif’？咱們可使用多選擇器。看下面：

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red;
}

可是這樣寫着很蛋疼啊，並且效率會很低。另一個辦法就是使用自定義屬性。咱們能夠給每一個錨點加個屬性

data-filetype

指定這個連接指向的圖片類型。

a[data-filetype="image"] { color: red;
}

16 selector[foo~=」bar」] : 屬性選擇器

a[data-info~="external"] { color: red;
} a[data-info~="image"] { border: 1px solid black;
}

這個我想會讓你的小夥伴驚呼妙極了。不多有人知道這個技巧。這個

~

符號能夠定位那些某屬性值是空格分隔多值的標籤。
繼續使用第15條那個例子，咱們能夠設置一個

data-info

屬性，它能夠用來設置任何咱們須要的空格分隔的值。這個例子咱們將指示它們爲外部鏈接和圖片連接。

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

給這些元素設置了這個標誌以後，咱們就可使用

~

來定位這些標籤了。

/* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red;
}
 
/* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black;
}

17 selector:checked ： 僞類選擇器

input[type=radio]:checked { border: 1px solid black;
}

上面這個僞類寫法能夠定位那些被選中的單選框和多選框，就是這麼簡單。
18 selector:after ： 僞類選擇器

before

和

after

這倆僞類。好像天天你們都能找到使用它們的創造性方法。它們會在被選中的標籤周圍生成一些內容。
當使用

.clear-fix

技巧時許多屬性都是第一次被使用到裏面的。

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0;
  } .clearfix { *display: inline-block; _height: 1%;
}

上面這段代碼會在目標標籤後面補上一段空白，而後將它清除。這個方法你必定得放你的聚寶盆裏面。特別是當

overflow:hidden

方法不頂用的時候，這招就特別管用了。
根據CSS3標準規定，可使用兩個冒號

::

。而後爲了兼容性，瀏覽器也會接受一個冒號的寫法。其實在這個狀況下，用一個冒號仍是比較明智的。
19 selector:hover ： 僞類選擇器

div:hover { background: #e3e3e3;
}

不用說，你們確定知道它。官方的說法是

user action pseudo class

.聽起來有點兒迷糊，其實還好。若是想在用戶鼠標飄過的地方塗點兒彩，那這個僞類寫法能夠辦到。
注意：舊版本的IE只會對加在錨點

a

標籤上的

:hover

僞類起做用。
一般你們在鼠標飄過錨點連接時候加下邊框的時候用到它。

a:hover { border-bottom: 1px solid black;
}

專家提示：border-bottom:1px solid black;比text-decoration:underline;要好看不少。
20 selector1:not(selector2) ： 僞類選擇器

div:not(#container) {
   color: blue;
}

取反

僞類是至關有用的，假設咱們要把除

id

爲

container

以外的全部

div

標籤都選中。那上面那麼代碼就能夠作到。
或者說我想選中全部出段落標籤以外的全部標籤

:not(p) { color: green;
}

21 selector::pseudoElement ： 僞類選擇器

p::first-line { font-weight: bold; font-size:1.2em;
}

咱們可使用

::

來選中某標籤的部份內容，如第一段，或者是第一個字。可是記得必須使用在塊式標籤上才起做用。
僞標籤是由兩個冒號 :: 組成的
定位第一個字：

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;
}

上面這段代碼會找到頁面上全部段落，而且指定爲每一段的第一個字。
它一般在一些新聞報刊內容的重點突出會使用到。
定位某段的第一行

p::first-line { font-weight: bold; font-size: 1.2em;
}

跟

::first-line

類似，會選中段落的第一行
爲了兼容性，以前舊版瀏覽器也會兼容單冒號的寫法，例如

:first-line

,

:first-letter

,

:before

,

:after

.可是這個兼容對新介紹的特性不起做用。
22 selector:nth-child(n) ： 僞類選擇器

li:nth-child(3) { color: red;
}

還記得咱們面對如何取到堆疊式標籤的第幾個元素時無處下手的時光麼，有了

nth-child

那日子就一去不復返了。
請注意

nth-child

接受一個整形參數，而後它不是從0開始的。若是你想獲取第二個元素那麼你傳的值就是

li:nth-child(2)

.
咱們甚至能夠獲取到由變量名定義的個數個子標籤。例如咱們能夠用

li:nth-child(4n)

去每隔3個元素獲取一次標籤。
23 selector:nth-last-child(n) ： 僞類選擇器

li:nth-last-child(2) { color: red;
}

假設你在一個

ul

標籤中有N多的元素，而你只想獲取最後三個元素，甚至是這樣

li:nth-child(397)

，你能夠用

nth-last-child

僞類去代替它。
24 selectorX:nth-of-type(n) ： 僞類選擇器

ul:nth-of-type(3) { border: 1px solid black;
}

曾幾什麼時候，咱們不想去選擇子節點，而是想根據元素的類型來進行選擇。
想象一下有5個

ul

標籤。若是你只想對其中的第三個進行修飾，並且你也不想使用

id

屬性，那你就可使用

nth-of-type(n)

僞類來實現了，上面的那個代碼，只有第三個

ul

標籤會被設置邊框。
25 selector:nth-last-of-type(n) ： 僞類選擇器

ul:nth-last-of-type(3) { border: 1px solid black;
}

一樣，也能夠相似的使用

nth-last-of-type

來倒序的獲取標籤。
26 selector:first-child ： 僞類選擇器

ul li:first-child { border-top: none;
}

這個結構性的僞類能夠選擇到第一個子標籤，你會常用它來取出第一個和最後一個的邊框。
假設有個列表，每一個標籤都有上下邊框，那麼效果就是第一個和最後一個就會看起來有點奇怪。這時候就可使用這個僞類來處理這種狀況了。
27 selector:last-child ： 僞類選擇器

ul > li:last-child { color: green;
}

跟

first-child

相反，

last-child

取的是父標籤的最後一個標籤。
例如
標籤

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

這裏沒啥內容，就是一個了 List。

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;
} li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;
}

上面的代碼將設置背景色，移除瀏覽器默認的內邊距，爲每一個

li

設置邊框以凸顯必定的深度。
28 selector:only-child ： 僞類選擇器

div p:only-child { color: red;
}

說實話，你會發現你幾乎都不會用到這個僞類。然而，它是至關有用的，說不許哪天你就會用到它。
它容許你獲取到那些只有一個子標籤的父標籤下的那個子標籤。就像上面那段代碼，只有一個段落標籤的

div

才被着色。

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

上面例子中，第二個

div

不會被選中。一旦第一個

div

有了多個子段落，那這個就再也不起做用了。
29 selector:only-of-type： 僞類選擇器

li:only-of-type { font-weight: bold;
}

結構性僞類能夠用的很聰明。它會定位某標籤下相同子標籤的只有一個的目標。設想你想獲取到只有一個子標籤的

ul

標籤下的li標籤呢？
使用

ul li

會選中全部

li

標籤。這時候就要使用

only-of-type

了。

ul > li:only-of-type { font-weight: bold;

最後記住：使用像jQuery等工具的時候，儘可能使用原生的CSS3選擇器。可能會讓你的代碼跑的很快。這樣選擇器引擎就可使用瀏覽器原生解析器，而不是選擇器本身的。
若是還有同窗對 nth-of-type 與 nth-child的認識仍是不明確，能夠移步到深刻理解css3中nth-child和 nth-of-type的區別這篇文章。

轉載於猿2048:➩《總結30個CSS3選擇器》