當前位置：
首頁 >
CSS交集选择器
發布時間：2025/6/15
57
豆豆
CSS交集選擇器的格式
第一種格式類似于：
h1.center {color:red; text-align:center;}這種格式由標簽選擇器和類選擇器組成。
第二種格式類似于：
h1#center {color:red; text-align:center;}這種格式由標簽選擇器和id選擇器組成。
兩個選擇器之間不能有空格，必須連續書寫。
以上這兩種格式組成的選擇器，也就是前者所定義的標簽類型和后者的類或者id的元素，稱之為交集選擇器。
示例一
<style type="text/css"> <!-- p{ /* 標簽選擇器 */color:blue; } p.color{ /* 交集選擇器 */color: red; } .color{ /* 類選擇器 */color:green; } --> </style>注意<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"> <!-- p{color:blue; } p.color{color: red; } .color{color:green; } --> </style> </head> <body> <h1>CSS交集選擇器示例</h1> <p>這是普通段落，藍色。</p> <p class="color">這是普通段落，紅色。</p> <h2 class="color">這是標題文本，綠色。</h2> </body> </html>在瀏覽器中查看CSS交集選擇器的顯示效果。如下圖所示：
示例二
<style type="text/css"> <!-- p{color:blue; } p#color{color: red; } #color{color:green; } --> </style>源代碼如下：
<!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"> <!-- p{color:blue; } p#color{color: red; } #color{color:green; } --> </style> </head> <body> <h1>CSS交集選擇器示例二</h1> <p>普通段落，藍色</p> <p id="color">普通段落，紅色</p> <h2 id="color">標題文本，綠色</h2> </body> </html>在瀏覽器中查看CSS交集選擇器示例二的顯示效果。如下圖所示：
總結
- 上一篇： html标签的嵌套规则
- 下一篇： CSS并集选择器