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

我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用

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

2. 我是正常的字體。

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

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

strong {

color: red;

}

h2 {

?

?

?

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

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

本電子書由站長(zhǎ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 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。 id 選擇器以 "#" 來(lái)定義。

?

?

?

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

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

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

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

#red {color:red;}

#green {color:green;}

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

這個(gè)段落是紅色。

這個(gè)段落是綠色。

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

id 選擇器和派生選擇器

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

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

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

?

?

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

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

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

能是 div 或者是表格單元，盡管它也可能是一個(gè)表格或者其他塊級(jí)元素。它甚至可以是一個(gè)內(nèi)聯(lián)元素，比如 或者 ，不過(guò)這樣的用法是非法的，因?yàn)椴豢梢栽趦?nèi)聯(lián)元素 中嵌入

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

一個(gè)選擇器，多種用法

即使被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個(gè) 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;

}

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

?

?

?

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

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

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

單獨(dú)的選擇器

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

#sidebar {

border: 1px dotted #000;

padding: 10px;

}

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

border: 1px dotted #000;

padding: 10px;

}

類選擇器

在 CSS 中，類選擇器以一個(gè)點(diǎn)號(hào)顯示：

.center {text-align: center}

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

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

This heading will be center-aligned

?

?

?

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

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

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

This paragraph will also be center-aligned.

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

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

.fancy td {

color: #f60;

background: #666;

}

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

td.fancy {

color: #f60;

background: #666;

}

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

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

?

?

?

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

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

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

更多電子書

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

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

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

WordPress免費(fèi)主題：http://www.wordpress.la/theme.html

WordPress免費(fèi)插件：http://www.wordpress.la/plugin.html

WordPress 主題制作電子書：

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

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

視頻教程：

1. 美國(guó)主機(jī)IXWebHosting 使用視頻教程（在線觀看及下載）

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

如果您有站長(zhǎng)類電子書，請(qǐng)到這里與我們分享：

詳情見(jiàn)： http://bbs.zzbaike.com/thread-23156-1-1.html

站長(zhǎng)百科感謝您下載閱讀，多謝支持！ ?

?

?

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

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