CSS相邻选择符
CSS相鄰選擇符
CSS相鄰選擇符也稱為同胞選擇器，用于定義同一個父級元素下，緊緊相鄰的兩個標簽元素中的第二個元素的樣式。
所謂相鄰選擇符，類似于下面的格式：
<body> <p>p元素</p> <strong>strong元素</strong> </body>p與strong就是相鄰的兩個標簽元素，它們都在父級元素body元素的下面。在CSS中，相鄰選擇符定義的就是strong元素。
CSS相鄰選擇符的定義
相鄰選擇符必須使用加號（+）符號。例如：
<style type="text/css"> <!-- p + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style>上述CSS代碼定義了body父元素下，相鄰的兩個元素p元素與strong元素中strong元素的樣式。
再看一個相鄰選擇符結合其它選擇符的例子：
html > body table + ul {margin-top:20px;}這個選擇器解釋為：選擇緊接在table元素后出現的所有相鄰的ul元素，該table元素包含在一個body元素中，body元素本身是html元素的子元素。
示例一
下面列出了相鄰選擇符的使用方法。如下所示：
<style type="text/css"> <!-- p + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style>在瀏覽器中查看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"> <!-- p + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style> </head> <body> <p>定義了p元素！</p> <strong>定義了與p元素相鄰的strong元素的樣式！</strong> </body> </html>如下圖所示：
示例二
<style type="text/css"> <!-- p + strong + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style>在瀏覽器中查看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"> <!-- p + strong + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style> </head> <body> <p>定義了p元素！</p> <strong>1. 定義了與p元素相鄰的strong元素的樣式！</strong> <strong>2. 定義了與p元素相鄰的strong元素的樣式！</strong> </body> </html>如下圖所示：
相鄰選擇符p+strong+strong的定義范圍是與p元素相鄰并且再與strong元素相鄰的strong元素，即p元素后的第二個strong元素就是定義了CSS樣式的元素。
示例三
<style type="text/css"> <!-- strong + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style>在瀏覽器中查看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"> <!-- strong + strong{color:#FF0000;font-size:18px;text-decoration:underline; } --> </style> </head> <body> <p>定義了p元素！</p> <strong>1. 定義了與p元素相鄰的strong元素的樣式！</strong> <strong>2. 定義了與p元素相鄰的strong元素的樣式！</strong> <strong>3. 定義了與p元素相鄰的strong元素的樣式！</strong> <strong>4. 定義了與p元素相鄰的strong元素的樣式！</strong> <strong>5. 定義了與p元素相鄰的strong元素的樣式！</strong> </body> </html>如下圖所示：
相鄰選擇符strong+strong所要定義的元素為與strong元素相鄰的strong元素，結構中5個strong元素都是相鄰的，排除第一個strong元素外，其余4個都可以理解為與strong元素相鄰的strong元素。
提示
并不是所有的瀏覽器都支持相鄰選擇符！IE7以下版本的IE瀏覽器不支持！
由于IE 6.0及更早的版本不支持相鄰選擇器，因此這種選擇器經常用于對IE 6.0隱藏某些CSS規則使用。
總結
- 上一篇： DIV+CSS星号（*）选择器
- 下一篇： CSS子选择符