CSS并集选择器
CSS并集選擇器也叫群選擇器，是由多個選擇器通過逗號連接在一起的，這些選擇器分別是：標簽選擇器、類選擇器或id選擇器等。
在聲明各種CSS選擇器時，如果某些選擇器的風格完全相同，或者部分相同，便可以利用并集選擇器同時聲明這些風格相同的CSS選擇器。
并集選擇器允許同時給多個選擇器應用同一種樣式。
CSS并集選擇器的格式
并集選擇器的格式類似于：
h1,h2,p,.color,#one{color:blue;font-size:14px; }這種集體聲明的效果與單獨聲明的效果完全相同。
示例一
<style type="text/css"> <!-- h2,h3,h4,h5,p{ /* 并集選擇器 */color:purple; /* 文字顏色 */font-size:24px; /* 字體大小 */ } #one,h2.two,.two{ /* 并集選擇器 */text-decoration:underline; /* 下劃線 */ } --> </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"> <!-- h2,h3,h4,h5,p{color:purple;font-size:24px; } #one,h2.two,.two{text-decoration:underline; } --> </style> </head> <body> <h1>CSS并集選擇器示例</h1> <h2 class="two">示例標題h2</h2> <h3>示例標題h3</h3> <h4>示例標題h4</h4> <h5>示例標題h5</h5> <p>示例文本p1</p> <p class="two">示例文本p2</p> <p id="one">示例文本p3</p> </body> </html>在瀏覽器中查看CSS并集選擇器的顯示效果。如下圖所示：
示例二
*{ /* 全局聲明 */color:red; /* 文字顏色 */font-size:24px; /* 字體大小 */ }一旦聲明了全局選擇器“*”，那么這個頁面內的所有html標簽的文字顏色全部為紅色，字體大小全部為24px。
源代碼如下：
<!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并集選擇器之全局聲明示例-baike369.com</title> <style type="text/css"> <!-- *{color:red;font-size:24px; } #one,h2.two,.two{text-decoration:underline; } --> </style> </head> <body> <h1>CSS并集選擇器之全局聲明示例</h1> <h2 class="two">全局聲明之示例標題h2</h2> <h3>全局聲明之示例標題h3</h3> <h4>全局聲明之示例標題h4</h4> <h5>全局聲明之示例標題h5</h5> <p>全局聲明之示例文本p1</p> <p class="two">全局聲明之示例文本p2</p> <p id="one">全局聲明之示例文本p3</p> </body> </html>在瀏覽器中查看CSS并集選擇器之全局聲明的顯示效果。如下圖所示：
提示
如果想讓一系列網頁元素共用相同格式化屬性中的部分屬性而不是全部屬性，就可以創建一個帶有共用格式化選項的并集選擇器，然后為每個元素分別創建具有特殊樣式的規則。換句話說，兩種或者多種不同的樣式可以格式化同一個標簽。
總結
- 上一篇： CSS交集选择器
- 下一篇： CSS使用浮动属性和边距设计3行3列定宽