首頁技術(shù)文章正文

一文吃透3類CSS復(fù)合選擇器【案例演示】

更新時(shí)間:2023-04-06 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

書寫CSS樣式表時(shí)，可以使用CSS基礎(chǔ)選擇器選中HTML元素。但是在實(shí)際網(wǎng)站開發(fā)中，一個(gè)網(wǎng)頁可能包含成千上萬的HTML元素，如果僅使用CSS基礎(chǔ)選擇器是遠(yuǎn)遠(yuǎn)不夠的。為此，CSS提供了兒種復(fù)合選擇器，實(shí)現(xiàn)了更強(qiáng)、更方便的選擇功能。復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器通過不同的方式組合而成的。CSS復(fù)合選擇器包括標(biāo)簽指定式選擇器、后代選擇器和并集選擇器，具體介紹如下。

(1)標(biāo)簽指定式選擇器

標(biāo)簽指定式選擇器又稱為“交集選擇器”，由兩個(gè)選擇器構(gòu)成，一個(gè)為標(biāo)簽選擇器，另一個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，例如，“h3.special”或“pone”。

下面通過一個(gè)案例對(duì)標(biāo)簽指定式選擇器做具體演示。

<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>標(biāo)簽指定式選擇器的應(yīng)用</title>
<style type="text/css">
p{ color:blue;}
·speclal{color:green;}
p.special{color:red;}  /*標(biāo)簽指定式選擇器*/
</style>
</head>
(body>
<p>普通段落文本（藍(lán)色）</p>
<p clasa="apecial“>指定了.special類的段落文本（紅色）</p>
<h3 class="spectal">指定了，special類的標(biāo)題文本(綠色)</h3>
</body>
</html>
上例中定義了<p>標(biāo)簽和“special”類的樣式;此外，還單獨(dú)定義了“pspecial”，用于控制特殊顯示的樣式。

(2)后代選擇器

后代選擇器用于選擇元素或元素組的后代，其定義方法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的“后代”。

如果<p>標(biāo)簽內(nèi)嵌套<strong>標(biāo)簽，就可以使用后代選擇器對(duì)其中的<strong>標(biāo)簽進(jìn)行控制，如下。

<!doctype htnl>
<html>
<head>
<meta charset="utf-8">
<title>后代選擇器</title>
<style type-"text/css">
p strong{color:red:}      /*后代選擇器*/
strong{color:blue:}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中，使用strong標(biāo)簽定義的文本（紅色）。</strong></p>
<strong>嵌套之外由strong標(biāo)簽定義的文本（藍(lán)色）。</strong>
</body>
</html>

定義了兩個(gè)<strong>標(biāo)簽，并將第一個(gè)<strong>標(biāo)簽嵌套在<p>標(biāo)簽中，然后分別設(shè)置<strong>標(biāo)簽和“p strong”的樣式。運(yùn)行效果如圖所示。

1680776016211_后代選擇器.png

通過圖片可以看出后代選擇器p strong定義的樣式僅適用于嵌套在<p>標(biāo)簽中的<strong>標(biāo)簽，其他的<strong>標(biāo)簽不受影響。需要說明的是，后代選擇器不局限于應(yīng)用在兩個(gè)元素中，如需要加入更多的元素，只需在元素之間加上空格即可。如果例3-l1中的標(biāo)簽中還嵌套了一個(gè)<em>標(biāo)簽，要想控制這個(gè)<em>標(biāo)簽，可以使用“pstrong em”選中該<em>標(biāo)簽。

(3)并集選擇器

并集選擇器的各個(gè)選擇器通過英文逗號(hào)連接而成，任何形式的選擇器(包括標(biāo)簽選擇器、類選擇器和i選擇器)，都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同，可以利用并集選擇器為它們定義相同的CSS樣式。

如果在頁面中有2個(gè)標(biāo)題和3個(gè)段落且它們的字號(hào)和顏色相同，同時(shí)其中一個(gè)標(biāo)題和兩個(gè)段落文本有下畫線效果，這時(shí)就可以使用并集選擇器定義CSS樣式，如下例所示。

<!doctype html>
<html>
<head>
<meta charaet="utf-8">
<title>井集選擇器</title>
<style type="text/css">
h2,h3,p{color:red; font-size:14px:}/*不同標(biāo)簽組成的并集選擇器*/
h3,.special,#one{text-decoration:underline;} /*標(biāo)簽選擇器、類選擇器、id選擇器組成的并集選擇器*/
</style>
</head>
<body>
<h2>二級(jí)標(biāo)題文本。</h2>
<h3>三級(jí)標(biāo)題文本，加下畫線，</h3>
<p claas="special">段落文本1，加下畫線。</p>
<p>段落文本2，普通文本。</p>
<p id="one">段落文本3,加下畫線。</p>
</body>
</html>

在例3-12中，使用由不同標(biāo)簽組成的并集選擇器“h2.h3.p”控制所有標(biāo)題和段落的字號(hào)和顏色。然后，使用由標(biāo)簽選擇器、類選擇器、id選擇器組成的并集選擇器“h3.special,fhfone”定義某些文本的下畫線效果。


分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！