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

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

IT培訓班

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

(1)標簽指定式選擇器

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

下面通過一個案例對標簽指定式選擇器做具體演示。

<!doctype html>
<html>
<head>
<meat charset="utf-8">
<title>標簽指定式選擇器的應用</title>
<style type="text/css">
p{ color:blue;}
·speclal{color:green;}
p.special{color:red;}  /*標簽指定式選擇器*/
</style>
</head>
(body>
<p>普通段落文本（藍色）</p>
<p clasa="apecial“>指定了.special類的段落文本（紅色）</p>
<h3 class="spectal">指定了，special類的標題文本(綠色)</h3>
</body>
</html>

上例中定義了標簽和“special”類的樣式;此外，還單獨定義了“pspecial”，用于控制特殊顯示的樣式。

(2)后代選擇器

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

如果標簽內嵌套標簽，就可以使用后代選擇器對其中的標簽進行控制，如下。

<!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標簽定義的文本（紅色）。</strong></p>
<strong>嵌套之外由strong標簽定義的文本（藍色）。</strong>
</body>
</html>

定義了兩個標簽，并將第一個標簽嵌套在標簽中，然后分別設置標簽和“p strong”的樣式。運行效果如圖所示。

1680776016211_后代選擇器.png

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

(3)并集選擇器

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

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

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

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

上一篇：前端中有幾種隱藏元素的方法? 下一篇：2023年黑馬程序員web前端開發(fā)學習路線圖【全套教程+配套源碼】