CSS 元素選擇器
CSS 選擇器分組
CSS 類選擇器詳解
CSS ID 選擇器詳解
CSS 屬性選擇器詳解
CSS 后代選擇器
CSS 子元素選擇器
CSS 相鄰兄弟選擇器
CSS 偽類
CSS 偽元素

CSS元素選擇器

最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。

CSS 元素選擇器（類型選擇器）可以設置 XML 文檔中元素的樣式。

CSS選擇器分組

1僧诚、h2, p {color:gray;}

2车要、通配符選擇器 * {color:red;}

這個聲明等價于列出了文檔中所有元素的一個分組選擇器食棕。利用通配選擇器寿弱，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定為 red。

3嚷硫、聲明分組
對聲明分組检访，一定要在各個聲明的最后使用分號，這很重要：

h1 {
    font: 28px Verdana;
    color: blue;
    background: red;
 }

4仔掸、結合選擇器和聲明的分組

h1, h2, h3, h4, h5, h6 {
    color:gray;
    background: white;
    padding: 10px;
    border: 1px solid black;
    font-family: Verdana;
}

類選擇器

語法

使用以下語法向這些歸類的元素應用樣式脆贵，即類名前有一個點號（.），然后結合通配選擇器：

*.important {color:red;}

如果您只想選擇所有類名相同的元素嘉汰，可以在類選擇器中忽略通配選擇器丹禀，這沒有任何不好的影響：

.important {color:red;}

結合元素選擇器

p.important {color:red;}

CSS 多類選擇器

一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔鞋怀。

例如双泪，如果希望將一個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

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

ID 選擇器

只能在文檔中使用一次

與類不同密似，在一個 HTML 文檔中焙矛，ID 選擇器會使用一次，而且僅一次残腌。

不能使用 ID 詞列表

不同于類選擇器村斟，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表抛猫。

區(qū)分大小寫

屬性選擇器

1蟆盹、簡單屬性選擇

例子 1

如果您希望把包含標題（title）的所有元素變?yōu)榧t色，可以寫作：

*[title] {color:red;}

例子 2

與上面類似闺金，可以只對有 href 屬性的錨（a 元素）應用樣式：

a[href] {color:red;}

例子 3

還可以根據多個屬性進行選擇逾滥，只需將屬性選擇器鏈接在一起即可。

例如败匹，為了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設置為紅色寨昙，可以這樣寫：

a[href][title] {color:red;}

例子 4

可以采用一些創(chuàng)造性的方法使用這個特性。

例如掀亩，可以對所有帶有 alt 屬性的圖像應用樣式舔哪，從而突出顯示這些有效的圖像：

img[alt] {border: 5px solid red;}

2、根據具體屬性值選擇

除了選擇擁有某些屬性的元素槽棍，還可以進一步縮小選擇范圍捉蚤，只選擇有特定屬性值的元素抬驴。

例子 1

例如，假設希望將指向 Web 服務器上某個指定文檔的超鏈接變成紅色缆巧，可以這樣寫：

a[] {color: red;}

例子 2

與簡單屬性選擇器類似怎爵，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。

a[] {color: red;}

根據部分屬性值選擇
如果需要根據屬性值中的詞列表的某個詞進行選擇盅蝗，則需要使用波浪號（~）。

假設您想選擇 class 屬性中包含 important 的元素姆蘸，可以用下面這個選擇器做到這一點：

p[class~="important"] {color: red;}



img[title~="Figure"] {border: 1px solid gray;}

這個規(guī)則會選擇 title 文本包含 "Figure" 的所有圖像墩莫。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。

子串匹配屬性選擇器

[abc^="def"] 選擇 abc 屬性值以 "def" 開頭的所有元素

[abc$="def"] 選擇 abc 屬性值以 "def" 結尾的所有元素

[abc*="def"] 選擇 abc 屬性值中包含子串 "def" 的所有元素

后代選擇器

語法解釋

在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器皮壁。選擇器之間的空格是一種結合符（combinator）椭更。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”蛾魄、“... 作為 ... 的后代”虑瀑，但是要求必須從右向左讀選擇器。

有關后代選擇器有一個易被忽視的方面滴须，即兩個元素之間的層次間隔可以是無限的舌狗。

子元素選擇器

如果您不希望選擇任意的后代元素，而是希望縮小范圍扔水，只選擇某個元素的子元素痛侍，請使用子元素選擇器（Child selector）。

例如铭污，如果您希望選擇只作為 h1 元素子元素的 strong 元素恋日，可以這樣寫：

h1 > strong {color:red;}

這個規(guī)則會把第一個 h1 下面的兩個 strong 元素變?yōu)榧t色，但是第二個 h1 中的 strong 不受影響：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素嘹狞，且二者有相同父元素岂膳。

結合其他選擇器
相鄰兄弟結合符還可以結合其他結合符：

html > body table + ul {margin-top:20px;}

這個選擇器解釋為：選擇緊接在 table 元素后出現的所有兄弟 ul 元素，該 table 元素包含在一個 body 元素中磅网，body 元素本身是 html 元素的子元素谈截。

偽類

偽類的語法：

selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用。

selector.class : pseudo-class {property: value}

:first-child 偽類
您可以使用 :first-child 偽類來選擇元素的第一個子元素。

p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}

:lang 偽類

:lang 偽類使你有能力為不同的語言定義特殊的規(guī)則簸喂。在下面的例子中毙死，:lang 類為屬性值為 no 的 q 元素定義引號的類型：

偽元素

:first-line 偽元素

"first-line" 偽元素用于向文本的首行設置特殊樣式纠拔。
在下面的例子中，瀏覽器會根據 "first-line" 偽元素中的樣式對 p 元素的第一行文本進行格式化：

實例

p:first-line
{
    color:#ff0000;
    font-variant:small-caps;
}

:first-letter 偽元素

"first-letter" 偽元素用于向文本的首字母設置特殊樣式：

偽元素可以與 CSS 類配合使用：

p.article:first-letter
{
    color: #FF0000;
}

<p class="article">This is a paragraph in an article泛豪。</p>

上面的例子會使所有 class 為 article 的段落的首字母變?yōu)榧t色稠诲。

:before 偽元素

":before" 偽元素可以在元素的內容前面插入新內容。

下面的例子在每個 <h1> 元素前面插入一幅圖片：

h1:before
{
content:url(logo.gif);
}

:after 偽元素

":after" 偽元素可以在元素的內容之后插入新內容诡曙。

下面的例子在每個 <h1> 元素后面插入一幅圖片：
h1:after
{
 content:url(logo.gif);
 }