本電子書由站長百科(www.zzbaike.com)教程組制作

我是粗體字，不是斜體字，因為我不在列表當中，所以這個規(guī)則對我不起作用

1. 我是斜體字。這是因為 strong 元素位于 li 元素內(nèi)。

2. 我是正常的字體。

在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。

再看看下面的 CSS 規(guī)則：

strong {

color: red;

}

h2 {

?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

color: red;

}

h2 strong {

color: blue;

}

下面是它施加影響的 HTML：

The strongly emphasized word in this paragraph isred.

This subhead is also red.

The strongly emphasized word in this subhead

isblue.

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 "#" 來定義。

?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：

#red {color:red;}

#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

這個段落是紅色。

這個段落是綠色。

注意：id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。想知道原因嗎，請參閱 XHTML:網(wǎng)站重構(gòu)。

id 選擇器和派生選擇器

在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器。

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

上面的樣式只會應用于出現(xiàn)在 id 是 sidebar 的元素內(nèi)的段落。這個元素很可?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內(nèi)聯(lián)元素，比如 或者 ，不過這樣的用法是非法的，因為不可以在內(nèi)聯(lián)元素 中嵌入

（如果你忘記了原因，請參閱 XHTML:網(wǎng)站重構(gòu)）。

一個選擇器，多種用法

即使被標注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

#sidebar h2 {

font-size: 1em;

font-weight: normal;

font-style: italic;

margin: 0;

line-height: 1.5;

text-align: right;

}

在這里，與頁面中的其他 p 元素明顯不同的是，sidebar 內(nèi)的 p 元素得到了特殊的處理，同時，與頁面中其他所有 h2 元素明顯不同的是，sidebar 中的 h2 元素也得到了不同的特殊處理。

?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

單獨的選擇器

id 選擇器即使不被用來創(chuàng)建派生選擇器，它也可以獨立發(fā)揮作用：

#sidebar {

border: 1px dotted #000;

padding: 10px;

}

根據(jù)這條規(guī)則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內(nèi)邊距（padding，內(nèi)部空白）。老版本的 Windows/IE 瀏覽器可能會忽略這條規(guī)則，除非你特別地定義這個選擇器所屬的元素： div#sidebar {

border: 1px dotted #000;

padding: 10px;

}

類選擇器

在 CSS 中，類選擇器以一個點號顯示：

.center {text-align: center}

在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則。

This heading will be center-aligned

?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

This paragraph will also be center-aligned.

注意：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td {

color: #f60;

background: #666;

}

在上面這個例子中，類名為 fancy 的更大的元素內(nèi)部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div） 元素也可以基于它們的類而被選擇：

td.fancy {

color: #f60;

background: #666;

}

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。

你可以將類 fancy 分配給任何一個表格元素任意多的次數(shù)。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規(guī)則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標注為 fancy 的元素也不會受這條規(guī)則的影響。這都是由于我們書寫這條規(guī)則的方式，這個效果被限制于被標注為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。

?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?

本電子書由站長百科(www.zzbaike.com)教程組制作

更多電子書

SEO 搜索引擎優(yōu)化基礎教程：

SEO 搜索引擎優(yōu)化高級教程：

wordpress的中文翻譯文檔：http://www.wordpress.la/codex.html，wordpress 開發(fā)的相關知識都有，對WordPress開發(fā)感興趣的博主會有一定的用處。

WordPress免費主題：http://www.wordpress.la/theme.html

WordPress免費插件：http://www.wordpress.la/plugin.html

WordPress 主題制作電子書：

Apache2.2中文文檔電子書： IXWeHosting 控制面板使用手冊(在線版 PDF電子書) ：

更多電子書下載：http://down.zzbaike.com/ebook/

視頻教程：

1. 美國主機IXWebHosting 使用視頻教程（在線觀看及下載）

2. Godaddy 主機及域名使用視頻教程（在線觀看及下載）

如果您有站長類電子書，請到這里與我們分享：

詳情見： http://bbs.zzbaike.com/thread-23156-1-1.html

站長百科感謝您下載閱讀，多謝支持！ ?

?

?

出處：站長百科?原文地址：?本電子書整理自站長百科CSS_id

選擇器詞條，查看內(nèi)容請訪問網(wǎng)站。?