介紹了這么多選擇符，其實(shí)選擇符的使用最大的優(yōu)勢(shì)不是單槍匹馬奮斗，而應(yīng)該是針對(duì)不同的頁(yè)面結(jié)構(gòu)組合成各種方陣。其主要方式體現(xiàn)在針對(duì)性使用類選擇符或者

ID選擇符、選擇符群組及選擇符組合這3種方式。

一、針對(duì)性使用類選擇符或者 ID選擇符主要作用于類選擇符或者 ID選擇符，尤其是類選擇符在一個(gè)頁(yè)面中可能 會(huì)在多處不同的標(biāo)簽中定義 同名的類，那么就需要針對(duì)性地使用類選擇符。

　　例如，頁(yè)面中所有標(biāo)簽元素的類名都為.test,需要將段落元素P的樣式定義為紅色字體，大小18px且?guī)聞澗€樣式。

　　

代碼<style?type="text/css">
.test
{
????font-size:12px;
}
p.test
{
????font-size:18px;
????color:red;
????text-decoration:underline;
}
</style>
<p?class="test">p標(biāo)簽內(nèi)文字，類名為test</p>
<div?class="test">div里面的文字，類也為test</div>
<p>p標(biāo)簽，沒(méi)有類</p>

可以猜到效果：類名為test的所有標(biāo)簽字體都是12px;而針對(duì)類名為test的P標(biāo)簽的樣式為紅色、大小18px、有下劃線。不帶class的標(biāo)記則為瀏覽器的默認(rèn)解析。

效果：

?

?二、ID選擇符的使用方式與類選擇符的使用方式相同，即:

　　p#test{color:red}?

三、選擇符群組，顧名思義就是將多個(gè)相同定義的選擇符組合。

　　例如，段落標(biāo)簽P、類選擇符.test及ID選擇符#title共同定義了顏色為紅色并且大小為20它的文字 。

代碼<style?type="text/css">
p,.test,#title
{
????font-size:20px;
????color:red;
}
</style>
<p?class="test">p標(biāo)簽內(nèi)文字，類名為test</p>
<div?class="test">div里面的文字，類也為test</div>
<span?class="test">span里面的文字，類也為test</span>
<p>p標(biāo)簽，沒(méi)有類</p>
<h3?id="title">h3里面文字，ID為title</h3>
<span>span不改變顏色</span>
<div>div不改變顏色</div>

效果如圖：

?

在選擇符群組中，每個(gè)選擇符之間使用英文的逗號(hào)（提醒一下：輸入法半角狀態(tài)下的逗號(hào)） 隔開(kāi)，選擇符之間的關(guān)系為并列關(guān)系。

四、選擇符的組合，根據(jù)HTML的結(jié)構(gòu)關(guān)系，層層遞進(jìn)的羅列選擇符，目標(biāo)選擇符為最后的一個(gè)選擇符。每個(gè)選擇符之間 使用空格分開(kāi)且它們的關(guān)系為父子關(guān)系。

　　假如在CSS中使用選擇符組合定義段落標(biāo)簽P中的子標(biāo)簽SPAN，即為：

?

p?span{color:Blue;}

選擇符總結(jié)：

　　介紹了這么多，我畫了張圖供各位參考一下：

　　　　

?

總結(jié)

以上是生活随笔為你收集整理的[你必须知道的css系列]第一回：丰富的利器终结篇：选择符的组合关系及选择符总结...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。