在網(wǎng)站程序設(shè)計過程中，了解基本的id選擇器，類選擇器和子選擇器，如果就此收手，那你會錯失很多靈活方法。雖然本文提及的部分選擇器屬于CSS3范圍內(nèi)，只在一些時新的瀏覽器有效，不過還是有必要記得這些選擇器。

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先進(jìn)的選擇器之前，為初學(xué)者之便，先把常見的選擇器解決掉。
星號符會選擇頁面每個元素。很多開發(fā)者用它把所有margin和padding歸零。這當(dāng)然是快捷測試方法。不過我建議你不使用它，它給瀏覽器帶來太多的負(fù)擔(dān)，這不必要。
通配選擇器也可以用到子選擇器上。

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

它會選擇#container層中的子元素。不過，也不需要經(jīng)常用這個技巧。
View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

2. #X

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

把哈希符號前綴于選擇器就成了ID選擇器。這是很普通的方法。不過使用之也需要謹(jǐn)慎。先問自己：為了定位元素就絕對需要賦予id？僵硬刻板的id選 擇器不能重復(fù)使用。如果可能，先試使用標(biāo)簽方法，如html5元素，或者偽類。（不過id選擇器的渲染速度是最快的，有得有失，譯者注）。
View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

3. .X

.error {
  color: red;
}

這是類選擇器。ID選擇器與類選擇器的差別是，后者可以用于多個元素。使用類選擇器可以把同樣的樣式賦予一群元素，相反，id選擇器只能作用于特定的單一元素。
View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

4. X Y

li a {
  text-decoration: none;
}

后代選擇器是使用很多的選擇器。它作用處于X元素內(nèi)的所有的y元素。不過如果你的選擇器像X Y Z A B.error，那你的方法就錯了。這開銷太大了。（后代選擇器的渲染速率不快，特別是在有很長的前綴元素時，譯者注）
View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

5. X

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

類型選擇器會選擇頁面中同一類型的標(biāo)簽。比如說ul{…}會選擇頁面中所有的ul。
View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

6. X:visited And X:link

a:link { color: red; }
a:visted { color: purple; }

:link作用于沒有訪問過的鏈接，:visited作用于訪問過的鏈接。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

7. X + Y

ul + p {
   color: red;
}

相信選擇器只作用于同一父級元素下的第一個元素。例子中的只有緊鄰ul中的第一個p的字體會是紅色的。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

8. X > Y

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

X Y和X>Y不同的地方后者只選擇X的第一級子元素。例如下面

                   List Item
                          Child                               List Item           List Item           List Item

選擇器#container>ul只選擇直接位于#container層下的ul,不會作用于li中的ul。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

9. X ~ Y

ul ~ p {
   color: red;
}

這個相鄰選擇器與X+Y相似，不同的是，ul+p只選擇與ul相鄰的第一個p,而x~Y選擇所有與ul相鄰的P。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

10. X[Title]

a[title] {
   color: green;
}

一種屬性選擇器。上例中，只選擇帶有title屬性的鏈接標(biāo)簽。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

11. X[Href="Foo"]

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

T上例中樣式只會作用于鏈接到http://net.tutsplus.com的a標(biāo)簽。其他沒有鏈到這個網(wǎng)址的a標(biāo)簽不會變成綠色。

這個很有用，不過有點死板，也許我想把所有的nettuts.com鏈接都變成綠色。在這種情況下，可以使用一些表達(dá)式。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

12. X[Href*="Nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

對了，就是這個。href后面加上星號(通配符)使網(wǎng)址出現(xiàn)nettuts的所有鏈接都變成綠色。比如說nettuts.com,tutsplus.com。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

13. X[Href^="Http"]

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

有些網(wǎng)站用這個方法在某些鏈接上加一些圖標(biāo)說明這些鏈接到其他網(wǎng)站。它經(jīng)常用于表達(dá)式中顯示字符串的開始。如果我們想選擇那樣帶有http的a標(biāo)簽鏈接，我們可以使用類似上面的CSS。(這不是搜索http://,這不必要，對https://沒起作用)。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

14. X[Href$=".Jpg"]

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

又一次，我們使用了一個表達(dá)式的符號，$,查找字符串的尾部。這個例子中，我們查找所有鏈接到圖片的鏈接，或許說以.jpg結(jié)尾的鏈接。這當(dāng)然不對gif和png格式的起作用。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

15. X[Data-*="Foo"]

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

回到第8個（？感覺第8個和這個有點風(fēng)馬牛不相及）；我們怎么補(bǔ)償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

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

回到第8個（？感覺第8個和這個有點風(fēng)馬牛不相及）；我們怎么補(bǔ)償不同圖片格式：png,jpeg,jpg,gif? 我們可以使用多重選擇器，比如：

 Image Link

在適當(dāng)?shù)牡胤郊由香^后，我們就可以使用一個標(biāo)準(zhǔn)的屬性選擇器選擇這些標(biāo)簽。

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

View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

16. X[Foo~="Bar"]

 a[data-info~="external"] {
   color: red;
}

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

這是一個讓人印象深刻的選擇器。了解這個技巧的人不多。~符號允許我們選擇帶有有空白間隔屬性的標(biāo)簽。

就像第15個選擇器一樣，這里，我們可以使用能用間隔符列出需要瓢東東的data-info屬性。舉例來說，我們給外鏈些記號吧。

" Click Me, Fool

在適當(dāng)?shù)胤绞褂脴?biāo)記，然后就可以選擇任何帶有這些屬性的標(biāo)簽。

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

View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

17. X:checked

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

這個偽類選擇器只會作用于被選中的用戶界面元素(user interface element)，比如說單選按鈕，或者復(fù)選框。
View Demo

兼容性

• IE9+

• Firefox

• Chrome

• Safari

• Opera

18. X:after

這個偽類和:before一樣，主要是用來清除浮動的。不過現(xiàn)在人們都能在它們身上找到新的用法。

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

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

• IE8+

• Firefox

• Chrome

• Safari

• Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

這是一個動態(tài)偽類。當(dāng)元素有鼠標(biāo)移在其上面時樣式就會起作用。一般用于鏈接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

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

兼容性

• IE6+ (In IE6, :hover must be applied to an anchor element)

• Firefox

• Chrome

• Safari

• Opera

20. X:not(Selector)

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

這個否定偽類非常有用。比如要選擇除#container層外的所有層。上面的代碼就非常有效。
又比如我要選擇除了段落標(biāo)簽外的所有元素(不建議這樣做)，可以這樣做：

*:not(p) {
  color: green;
}

View Demo

兼容性

• IE9+

• Firefox

• Chrome

• Safari

• Opera

21. X::PseudoElement

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

使用這類偽類(用::指定)可以設(shè)計一個元素的一片斷，比如說第一行，或者第一個字。需要記住的事，這偽類只能作用于塊元素。

選擇段落的第一個字符

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

這代碼片斷先提取頁面中的所有段落，然后再查找段落中的第一個字。
這方法經(jīng)常用于制作報紙風(fēng)格的頁面。

選擇段落的第一行

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

View Demo

兼容性

• IE6+

• Firefox

• Chrome

• Safari

• Opera

22. X:nth-Child(N)

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

過去我們無法從一堆元素中選擇具體的幾個。nth-child偽類可以解決這種問題。
nth-child接受整數(shù)參數(shù)，不過它不是基于零開始，如果你要選擇列表中的第二個，就使用li:nth-child(2)。
我們還可以使用這個偽類選擇幾個子類。比如，用li:nth-child(4n)來選擇4倍數(shù)的列表。
View Demo

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

23. X:nth-Last-Child(N)

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

如果列表項非常多，但只是需要選擇倒數(shù)第三個。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一樣，nth-last-child是從后面倒著數(shù)。
View Demo

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

24. X:nth-Of-Type(N)

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

選擇子類也許不如根據(jù)類型選擇元素更方便。比如說現(xiàn)在有5個無序列表，但只需選擇第三個，這時可以使用ul:nth-of-type(3)。
View Demo

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

25. X:nth-Last-Of-Type(N)

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

對了，我們也可以使用nth-last-of-type選擇倒數(shù)第幾個元素。

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

26. X:first-Child

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

這個結(jié)構(gòu)性偽類選擇父級元素的第一個子對象。這個經(jīng)常用于移除列表的第一個和最后一個元素的邊框。
View Demo

兼容性

• IE7+

• Firefox

• Chrome

• Safari

• Opera

27. X:last-Child

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

這個偽類選擇父級元素的最后一個對象。

例子

用一個簡單的例子來說明這樣選擇器，首先，我們制作一個列表。

標(biāo)簽

        List Item       List Item       List Item

很簡單的列表

CSS

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

設(shè)置好背景，去掉ul默認(rèn)的內(nèi)邊距，再給每個li加上邊。

就像圖片中顯示的一樣，我們需要去掉第一個和最后一個的邊。這時就可以使用:first-child和:last-child。

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

li:last-child {
   border-bottom: none;
}

View Demo

兼容性

• IE9+

• Firefox

• Chrome

• Safari

• Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-Child

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

確實，這個你可能很少用。不過這個真的很有用。
在下面的例子，只有第一層中的p標(biāo)簽會變色。父級元素下的子類多于一個時這個偽類效果就停止了。

 My paragraph here.     Two paragraphs total.     Two paragraphs total.

View Demo

兼容性

• IE9+

• Firefox

• Chrome

• Safari

• Opera

29. X:only-Of-Type

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

和28個結(jié)構(gòu)性偽類相似，這個偽類只會在父級元素下只有一個子級元素X的情況下起作用。這種情況，你也可以使用ul li，不過這樣就會選擇所有列表項了。

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

View Demo

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

30. X:first-Of-Type

first-of-type允許我們選擇同級元素的第一個。

一個測試

為便于理解，做個測試。復(fù)制下面的標(biāo)簽

    My paragraph here.           List Item 1        List Item 2              List Item 3        List Item 4

現(xiàn)在，嘗試去選擇list Item 2,當(dāng)你找到方法或者放棄時，請接著看一下。

辦法1

有幾種的不同的方法。我們評審其中幾個。首先用first-of-type

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

這個代碼的意思是，在頁面中找到第一個無序列表，然后再找到其直接的子級元素(也就是li)，最后找到第二個li。

方法2

p + ul li:last-child {
   font-weight: bold;
}

在這個例子，先查找與p標(biāo)簽直接相鄰的ul標(biāo)簽，然后再找倒數(shù)第一個li(也就是第二個li)。

方法3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

View Demo

兼容性

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

• ------北京網(wǎng)站建設(shè)公司   北京傳誠信------