CSS選擇器的語(yǔ)法如下：CSS的選擇器由選擇器名和一對(duì)花括號(hào)（{}）組成，選擇器名表示要選擇的網(wǎng)頁(yè)元素，花括號(hào)表示選擇器的樣式集合?；ɡㄌ?hào)中有是若干個(gè)聲明語(yǔ)句，每條聲明語(yǔ)句之間以分號(hào)“;”（注意是英文狀態(tài)的分號(hào)）分隔。聲明語(yǔ)句的格式如下：

屬性名:屬性值;其中的冒號(hào)和分號(hào)都必須是英文狀態(tài)的符號(hào)，如果不慎輸成中文狀態(tài)的冒號(hào)和分號(hào)，就會(huì)出現(xiàn)無(wú)法應(yīng)用樣式的情況，這一點(diǎn)需要引起大家的注意。如果有多條聲明語(yǔ)句，最后一條聲明語(yǔ)句的后面最好也要加上一個(gè)分號(hào)，雖然這不是必須的，但這是一個(gè)好的習(xí)慣，它可以使你在添加聲明語(yǔ)句時(shí)，減少錯(cuò)誤發(fā)生的機(jī)會(huì)。在實(shí)際應(yīng)用中，為了更好的閱讀和維護(hù)CSS文件，通常以下面的格式編寫(xiě)CSS的選擇器，即一行只有一條聲明語(yǔ)句。selector{

屬性名1:屬性值1;

屬性名2:屬性值2; /*非CSS有效成分，只表示省略的聲明。以/*開(kāi)頭和以*/結(jié)束的為CSS的注釋*/...;

屬性名n:屬性值n;}CSS中包含很多屬性，由于本書(shū)不是專門講述CSS，所以沒(méi)有全面介紹CSS的屬性，用到的屬性，在聲明語(yǔ)句中通過(guò)注釋的方式進(jìn)行解釋，所以請(qǐng)各位讀者在閱讀這部分內(nèi)容時(shí)，一定要對(duì)照代碼進(jìn)行理解，不要忽視了代碼，閱讀代碼也是在學(xué)習(xí)！需要注意的是，相同的屬性重復(fù)出現(xiàn)時(shí)，將不再進(jìn)行注釋。CSS屬性大部分比較直觀，可以見(jiàn)名知義。大家可以參考CSS參考手冊(cè)或者網(wǎng)絡(luò)搜索學(xué)習(xí)自己不知道的屬性。下面分別介紹CSS的基本選擇器。2.3.1標(biāo)記選擇器

標(biāo)記選擇器也稱為元素選擇器或類型選擇器，是最基本的選擇器。選擇器名即為標(biāo)準(zhǔn)的HTML元素，即對(duì)文檔中所有特定的HTML元素指定樣式。標(biāo)記選擇器的用法如清單2-1所示。

清單2-1CSS標(biāo)記選擇器<styletype="text/css"> /*選擇網(wǎng)頁(yè)中所有的h2元素，應(yīng)用紅色樣式*/h2{ color:red;/*定義元素的顏色為紅色*/ }</style><h2>這是二級(jí)標(biāo)題</h2><h3>這是三級(jí)標(biāo)題</h3><h2>這仍然是二級(jí)標(biāo)題</h2>代碼說(shuō)明如下圖：從清單2-1中可以看出：★標(biāo)記選擇器會(huì)選擇網(wǎng)頁(yè)中所有的與選擇器名稱相同的元素，對(duì)它們應(yīng)用定義的樣式，而不論這一標(biāo)記在什么位置。

★凡是與標(biāo)記選擇器名稱不一致元素，均不會(huì)應(yīng)用它定義的樣式。2.3.2類選擇器類選擇器以點(diǎn)號(hào)（英文的句號(hào)）“.”開(kāi)頭，后根類選擇器名字，名字可以是任意字符串，但第一個(gè)字符不能是數(shù)字，在有些瀏覽器中不能支持。需要注意的是點(diǎn)號(hào)和類選擇器名之間不能有空格。類選擇器的聲明如下：.className{ /*選擇器屬性聲明*/}類選擇器對(duì)當(dāng)前網(wǎng)頁(yè)（包含類選擇器的網(wǎng)頁(yè)）中所有class屬性值等于“類選擇器名”的樣式起作用。清單2-2類選擇器應(yīng)用實(shí)例<styletype="text/css"> /*選擇網(wǎng)頁(yè)中所有class屬性值為mycolor的元素應(yīng)用樣式*/.mycolor{ color:rgb(90%,60%,0%);/*定義元素的顏色為棕色*/ }</style><h1>沒(méi)有應(yīng)用樣式</h1><h1class="mycolor">應(yīng)用類選擇器mycolor的樣式</h1><p>此段落沒(méi)有樣式</p><pclass="mycolor">

此段落應(yīng)用類選擇器mycolor的樣式</p><pclass="myshape">

此段落也沒(méi)有應(yīng)用任何樣式。</p>代碼說(shuō)明如下圖：通過(guò)以上清單可以看出：◆凡是class屬性值等于類選擇器名的元素都會(huì)應(yīng)用它定義的樣式?！舴彩菦](méi)有包含class屬性，或者包含class屬性，但其值不等等類選擇器名字（這里是mycolor）的，都不會(huì)應(yīng)用類選擇器定義的樣式。。◆對(duì)于不同的元素，如清單中的h1和p，只要它們的class屬性值相同就會(huì)應(yīng)用相同的樣式?！魺o(wú)論class屬性值等于類選擇器名字的元素有多少個(gè)，全部都會(huì)應(yīng)用類選擇器定義的樣式。如清單中就有兩個(gè)元素，分別為h1和p應(yīng)用了mycolor類選擇器的樣式2.3.3ID選擇器

ID選擇器可以為網(wǎng)頁(yè)中包含特定的id的元素指定樣式。ID選擇器的構(gòu)成是以井號(hào)“#”開(kāi)頭，后接選擇器名（中間無(wú)空格）構(gòu)成，格式如下：#selectorName{ /*CSS屬性聲明*/}同樣，ID選擇器的名字的第一個(gè)字符也不能是數(shù)字，此外還要求在同一網(wǎng)頁(yè)中id的屬性值是唯一的。雖然瀏覽器在解析包含多個(gè)相同id屬性值的網(wǎng)頁(yè)時(shí)不會(huì)出現(xiàn)任何問(wèn)題，但在JavaScript操作這些id元素時(shí)就會(huì)出現(xiàn)問(wèn)題，所以一定保證在一個(gè)網(wǎng)頁(yè)中沒(méi)有id屬性值相同的元素。ID選擇器應(yīng)用實(shí)例如清單2-3所示。

清單2-3ID選擇器應(yīng)用實(shí)例<styletype="text/css"> /*選擇網(wǎng)頁(yè)中id屬性值為emphasis的元素應(yīng)用樣式*/#emphasis{ color:red; }</style><h2id="emphasis">Ajax</h2><h2>普通標(biāo)題</h2><pid="emphasis">這個(gè)也強(qiáng)調(diào)一下！</p><pid="common">這是普通的段落。</p>代碼說(shuō)明如下圖：通過(guò)觀察清單2-3中的代碼，可以得到如下結(jié)論：▲包含id屬性且屬性值與ID選擇器同名的（本例中為emphasis）元素應(yīng)用ID選擇器定義的樣式。▲包含id屬性但屬性值與ID選擇器名字不同的元素，不會(huì)應(yīng)用ID選擇器定義的樣式。▲不包含id屬性的元素不會(huì)應(yīng)用ID選擇器定義的樣式?！痪W(wǎng)頁(yè)中，有兩個(gè)同名的id，也可以正常顯示，但一定不要這樣做！2.3.4屬性選擇器

屬性選擇器對(duì)于帶有指定屬性的網(wǎng)頁(yè)元素應(yīng)用指定的樣式，它是一類選擇器。屬性選擇器即可以選擇特定屬性的元素，也可以選擇特定屬性值的元素，對(duì)于元素的樣式控制增加了靈活性。CSS中常見(jiàn)的屬性選擇器如表2-3所示。*說(shuō)明：attribute指元素的屬性，value指元素的屬性值。表2-3CSS常見(jiàn)屬性選擇器選擇器說(shuō)

明備

注[attribute]選擇網(wǎng)頁(yè)中帶有指定屬性的元素應(yīng)用指定的樣式。

[attribute=value]選擇網(wǎng)頁(yè)中帶有指定屬性和值的元素應(yīng)用指定的樣式。

[attribute~=value]選擇網(wǎng)頁(yè)中屬性值包含指定單詞（由空格分隔）的元素應(yīng)用指定的樣式。如，”helloworld”包含hello，而”helloworld”則不包含hello。

[attribute|=value]選擇網(wǎng)頁(yè)中屬性值包含指定單詞（由邊字符“-”分隔）的元素應(yīng)用指定的樣式。

[attribute^=value]選擇屬性值以指定字符串開(kāi)頭的元素應(yīng)用指定的樣式。CSS3新增[attribute$=value]選擇屬性值以指定字符串結(jié)尾的元素應(yīng)用指定的樣式。CSS3新增[attribute*=value]選擇屬性值包含指定字符串的元素應(yīng)用指定的樣式。CSS3新增*說(shuō)明：attribute指元素的屬性，value指元素的屬性值。下面分別說(shuō)明這些屬性選擇器的用法。對(duì)于[attribute]和[attribute=value]的選擇器，意義比較明確。前者是選擇包含指定屬性的元素，而后者選擇包含屬性且屬性值相同的元素。如下面的代碼所示。<styletype="text/css"> /*選擇所有包含alt屬性的元素應(yīng)用樣式*/[alt]{ color:red; } </style><ahref="#"alt="Ajax技術(shù)">包含alt屬性應(yīng)用樣式</a><ahref="#">不包含alt屬性，無(wú)樣式</a><hr/><styletype="text/css">

*//*選擇包含accesskey屬性且屬性值為k的元素應(yīng)用樣式

[accesskey="k"]{ color:green; } </style><buttonaccesskey="k">包含accesskey屬性且值為k應(yīng)用樣式</button><buttonaccesskey="m">雖包含accesskey屬性，但值不為k，無(wú)樣式</button>代碼已經(jīng)包含選擇器的應(yīng)用說(shuō)明，在此不再贅述。[attribute~=value]選擇器

該選擇器選擇屬性值包含以空格分隔的單詞的元素，如下面的代碼所示：<styletype="text/css"> /*選擇以空格對(duì)class屬性值進(jìn)行拆分，可以拆分出hello字符串的元素應(yīng)用樣式*/ [class~="hello"]{ color:#f0f; }</style><pclass="hello">屬性值即為hello，應(yīng)用樣式</p><pclass="helloworld">包含空格分隔的hello，應(yīng)用樣式</p><pclass="readerhello">包含空格分隔的hello，應(yīng)用樣式</p><pclass="readerhello">雖包含hello，但不以空格分隔，無(wú)樣式</p><pclass="hello-world">其他符號(hào)分隔無(wú)樣式</p>[attribute|=value]選擇器

該選擇器用于選擇屬性值包含以連字符（-）分隔的單詞的元素，可用于指定元素語(yǔ)言（即lang屬性）的元素，用法如下：<styletype="text/css">/*選擇以"-"對(duì)lang屬性值進(jìn)行拆分，可以拆分出en字符串的元素應(yīng)用樣式*/ [lang|="en"]{

/*定義元素的邊框，1px表示邊框的寬度，*solid表示邊框的線型（solid表示實(shí)線），*red表示邊框的顏色

*/border:1pxsolidred; }</style><plang="en">屬性為en，可以應(yīng)用樣式</p><plang="en-us">可以應(yīng)用樣式</p><plang="zh">不含連字符分隔的en不可應(yīng)用樣式</p><plang="en,zh">逗號(hào)分隔不可應(yīng)用樣式</p><plang="enzh">空格分隔en不可應(yīng)用樣式</p>對(duì)于屬性值即為指定的單詞（字符串）時(shí)，[attribute~=value]和[attribute|=value]選擇器是相同的，都可以選擇屬性值為指定單詞的元素。后面介紹的幾個(gè)屬性選擇器都是如此，值得注意一下，對(duì)于設(shè)計(jì)網(wǎng)頁(yè)樣式很有用。如<pclass="hello">屬性值即為hello，應(yīng)用樣式</p>可以應(yīng)用[class~="hello"]{ color:#f0f;}這個(gè)選擇器的樣式，同樣的<plang="en">屬性為en，可以應(yīng)用樣式</p>可以應(yīng)用[lang|="en"]{ border:1pxsolidred;}這個(gè)選擇器應(yīng)用樣式。[attribute^=value]選擇器

該選擇器是CSS3新增的一種屬性選擇器，用于選擇以指定字符串開(kāi)頭為屬性值的元素，為它們應(yīng)用樣式。用法如下：<styletype="text/css"> /*選擇以class屬性值以hello字符串開(kāi)頭的元素*/ [class^="hello"]{/*定義元素的邊框，1px表示邊框的寬度，*dashed表示虛線邊框，*red表示邊框的顏色*/ border:1pxdashedred; }</style><pclass="hello">屬性值即為hello，應(yīng)用樣式</p><pclass="helloworld">以hello開(kāi)頭后接“world”,應(yīng)用樣式</p><pclass="helloworld">以hello開(kāi)頭后接“world”，應(yīng)用樣式</p><pclass="hello-world">以hello開(kāi)頭后接“-world”，應(yīng)用樣式</p><pclass="hello,world">以hello開(kāi)頭后接“,world”，應(yīng)用樣式</p>從代碼中可以看出，只要是以hello開(kāi)頭的屬性值都會(huì)被選中應(yīng)用指定的樣式。[attribute$=value]選擇器

該選擇器也是CSS3新增加的屬性選擇器，選擇包含以指定字符串結(jié)尾的屬性值元素，對(duì)它們應(yīng)用樣式。用法如下：<styletype="text/css">/*選擇以class屬性值以hello字符串結(jié)尾的元素*/ [class$="hello"]{ border:1pxdashedgreen;

}</style><pclass="hello">屬性值即為hello，應(yīng)用樣式</p><pclass=".hello">屬性值為"."+hello，應(yīng)用樣式</p><pclass="world.hello">屬性值為"world."+hello,應(yīng)用樣式</p><pclass="worldhello">屬性值為“world”+hello，應(yīng)用樣式</p><pclass="world-hello">屬性值為“world-”+hello，應(yīng)用樣式</p><pclass="world,hello">屬性值為“world,”+hello，應(yīng)用樣式</p>值得注意的是，<pclass="world.hello">屬性值為"world."+hello,應(yīng)用樣式</p>這個(gè)段落不能使用類選擇器指定它的樣式！如果以類型選擇器指定它的樣式時(shí)，就應(yīng)該寫(xiě)作：.world.hello{ /*樣式聲明*/}這樣就會(huì)產(chǎn)生歧義，因?yàn)榻M合選擇器中的包含選擇器就是這種語(yǔ)法格式，遇到這種情況就只能使用屬性選擇器了。[attribute*=value]選擇器

該選擇器也是CSS3新增加的屬性選擇器，選擇包含指定字符串的屬性值的元素應(yīng)用樣式，而不論指定的字符串的位置（開(kāi)頭、居中還是最后），以及使用什么樣的分隔符。用法如下：<styletype="text/css"> /*選擇class屬性值包含welcome字符串的元素*/ [class*="welcome"]{ border:1pxdashedblue; }</style><pclass="welcome">屬性值即為welcome，應(yīng)用樣式</p><pclass="hiwelcome">屬性值以welcome結(jié)尾，應(yīng)用樣式</p><pclass="hiwelcomebye">屬性值包含welcome，應(yīng)用樣式</p>這是一種最廣泛的包含指定字符串的選擇器，只要屬性值包含指定的字符串的元素都會(huì)被選擇。本節(jié)中所有的示例代碼全部如清單2-4所示。在瀏覽器中運(yùn)行清單2-4所示的代碼，會(huì)出現(xiàn)樣式疊加的情況，即一個(gè)元素顯示了兩種選擇器規(guī)定的樣式，這是選擇器的基本特性之一，稍后我們將詳細(xì)討論這一特性。2.3.5屬性性選擇器串連

1、屬性選擇器指定元素標(biāo)記

屬性選擇器除了可以利用屬性和值選擇元素之外，還可以使用標(biāo)記加屬性的方式選擇元素。上一節(jié)中介紹的所有選擇器，都可以在前面加上標(biāo)記名稱，用以選擇包含指定屬性或?qū)傩灾迪鄳?yīng)元素。如<styletype="text/css">/*選擇class屬性值為welcome的p元素*/ p[class="welcome"]{ border:1pxdashedblue; }</style><pclass="welcome">class屬性值為welcome的p段落，應(yīng)用樣式</p><h3class="welcome">class屬性值也為welcome，但不是p標(biāo)記，無(wú)樣式</h3>2、選擇多重屬性

如果要選擇包含多個(gè)屬性的元素，可以把屬性選擇器串連使用（實(shí)際上是一種組合選擇器），用法如下：<styletype="text/css"> /*選擇alt屬性值為welcome且包含required屬性的