“交集”復合選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間不能有空格，必須連續書寫。
注意其中第一個必須是標記選擇器，如p.class1，但有時候會看到.class1.class2，即2個都是類選擇器，在其他瀏覽器中是允許出現這種情況的，但IE6不兼容。如下表：
兩個類選擇器的“交集”復合選擇器瀏覽器支持表：
| Mac: Safari 4.0 | 支持 |
|---|---|
| Mac: Chrome 5.0 | 支持 |
| Mac: FireFox 3.6 | 支持 |
| Mac: Opera 10 | 支持 |
| Win: FireFox 3.6 | 支持 |
| Win: Opera 10 | 支持 |
| Win: IE6 | 不支持 |
| Win: IE7 | 支持 |
| Win: IE8 | 支持 |
實例demo:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無標題文檔</title> <style> body{padding:50px;} *{padding:0;margin:0;color:#fff;text-decoration:none;list-style:none;font-family:"微軟雅黑"} li{width:300px;height:80px;line-height:80px;text-align:center;} .classone{background:#f00;} .classone.classtwo {background:#090} .classtwo{background:#009} </style> </head> <body> <ul> <li class="classone"><a href="#">classone紅色的</a></li> <li class="classone classtwo"><a href="#">classone and classtwo 綠色的</a></li> <li class="classtwo"><a href="#">classtwo藍色的</a></li> </ul> </body> </html>
效果圖:
