首先先看一下基本定義：

復合選擇器就是兩個或多個基本選擇器，通過不同方式連接而成的選擇器，主要包括“交集”選擇器、“并集”選擇器、“后代”選擇器。

?

交集選擇器

“交集”復合選擇器是由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間不能有空格，必須連續書寫。

注意其中第一個必須是標記選擇器，如p.class1，但有時候會看到.class1.class2，即2個都是類選擇器，在其他瀏覽器中是允許出現這種情況的，但IE6不兼容。如下表：

兩個類選擇器的“交集”復合選擇器瀏覽器支持表Mac: Safari 4.0Mac: Chrome 5.0Mac: FireFox 3.6Mac: Opera 10Win: FireFox 3.6Win: Opera 10Win: IE6Win: IE7Win: IE8

支持

支持

支持

支持

支持

支持

不支持

支持

支持

復合選擇器的使用

這是個簡單的tab菜單：

如下是html代碼:

?

1	<ul class="nav">

?

2	???? <li class="first"><a href="">節目</a></li>

?

3	???? <li class="current"><a href="">合集</a></li>

?

4	???? <li><a href="">草稿</a></li>

?

5	???? <li class="last"><a href="">項目</a></li>

?

6

</ul>

?

為了實現以上效果，我們在css中可以使用復合選擇器。

選擇
<a>
?標簽

可以用一個選擇器來定義所有的?
<a>
?元素, 如下:

.nav li a { }

選擇第一個?
<a>
?元素

為了增加列表左上角的圓角效果, 你需要選擇第一個?
<a>
?元素. 這可以用如下的選擇器來實現:

.nav li.first a { }

選擇最后一個?
<a>
?元素

為了增加列表右上角的圓角效果, 你需要選擇最后一個?
<a>
?元素. 這可以用如下的選擇器來實現:

.nav li.last a { }

突出顯示當前頁

通過改變tab的顏色來顯示頁面是當前頁，我們可以在類名中加入current這個類名來實現，如下：

.nav li.current a { }

為當前頁面的左右上角添加圓角樣式

現在有個問題，第一個和最后一個選項被選中的時候拐角是直角的.為了達到選中時候是當前頁的樣式，拐角也是圓角效果，我們需要給專門給它們寫特殊的選擇器，由于現在我們的類名都在同一個元素中，所以我們最終可以用交集復合選擇器來實現，如下：

.nav .first.current a { } .nav .last.current a { }

轉載于:https://www.cnblogs.com/losesea/archive/2013/02/02/2890555.html

總結

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

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