使用CSS的類名交集複合選取器

首先先看一下基本定義：

　　複合選取器就是兩個或多個基本選取器，通過不同方式串連而成的選取器，主要包括“交集”選取器、“並集”選取器、“後代”選取器。 

　　交集選取器

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

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

　　兩個類別選取器的“交集”複合選取器瀏覽器支援表：

　　複合選取器的使用

　　這是個簡單的tab菜單：

　　如下是html代碼:

<ul class="nav">
<li class="first"><a href="">節目</a></li>
<li class="current"><a href="">合集</a></li>
<li><a href="">草稿</a></li>
<li class="last"><a href="">項目</a></li>
</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 {}

　　結果

　　這看上去很簡單，是不是？就像上面提到的，現在的問題是：IE5和IE6都不支援類名交集複合選取器。IE5和IE6在識別類名時候只會識別最後一個類名。效果如下：

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

　　IE5和IE6把這2個選取器解析為：

.topnav .currents a {}
.topnav .current a {}

　　這意味著這些瀏覽器會給所有的當前頁都增加圓角效果，效果如下：

　　在IE7下也是沒問題的，說明IE7也支援類名交集複合選取器。

　　解決的辦法

　　可以給第一個和最後一個li單獨加一個current的樣式，但這樣增加了js的負擔。

<ul class="nav">;
<li class="first first_current"><a href="">節目</a></li>;
<li class="current"><a href="">合集</a></li>;
<li><a href="">草稿</a></li>;
<li class="last last_current"><a href="">項目</a></li>;
</ul>; .nav .first_current a {}
.nav .last_current a {}

　　討論

　　有一種方法可以讓我們不用在頁面中增加像first、last這種多餘的類名，那就是使用css3的樣式。css3讓我們選擇元素變得越來越簡單，實現頭尾效果可用如下效果：

li:first-of-type a {}
li:last-of-type a {} 3 1

來源：http://www.codesocang.com/news/Webqianduan/2014/0511/7604.html