當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS交集选择器

發布時間：2025/6/15 CSS 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS交集选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS交集選擇器的格式

第一種格式類似于：

h1.center {color:red; text-align:center;}

這種格式由標簽選擇器和類選擇器組成。

第二種格式類似于：

h1#center {color:red; text-align:center;}

這種格式由標簽選擇器和id選擇器組成。

兩個選擇器之間不能有空格，必須連續書寫。

以上這兩種格式組成的選擇器，也就是前者所定義的標簽類型和后者的類或者id的元素，稱之為交集選擇器。

示例一

注意<p>標簽加載CSS樣式的順序！

在上述代碼中：

<p class="center">在樣式表中首先加載p.color{...}，如果p.color{...}不存在，才會加載.color{...}，本例是加載p.color{...}。
同樣，<h2 class="color">首先加載h2.color{...}，因為h2.color{...}不存在，所以加載了.color{...}。
在p.color{...}中定義的風格樣式只適用于<p class="color">標簽，而不會影響使用了.color的其它標簽。

源代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS交集選擇器示例-www.baike369.com</title> <style type="text/css">  </style> </head> <body> <h1>CSS交集選擇器示例</h1> <p>這是普通段落，藍色。</p> <p class="color">這是普通段落，紅色。</p> <h2 class="color">這是標題文本，綠色。</h2> </body> </html>

在瀏覽器中查看CSS交集選擇器的顯示效果。如下圖所示：

示例二

源代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS交集選擇器示例二-www.baike369.com</title> <style type="text/css">  </style> </head> <body> <h1>CSS交集選擇器示例二</h1> <p>普通段落，藍色</p> <p id="color">普通段落，紅色</p> <h2 id="color">標題文本，綠色</h2> </body> </html>

在瀏覽器中查看CSS交集選擇器示例二的顯示效果。如下圖所示：

總結

以上是生活随笔為你收集整理的CSS交集选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。