CSS3之結構僞類

1、在介紹結構僞類以前，先來看一個咱們傳統的解決問題的方式：

例如：

水平導航欄通常都是由一組相同間距的 <li> 連接組成。假設咱們想讓每個導航連接

除了第一個和最後一個，左右兩邊都有必定的外邊距。

咱們以前傳統的作法是在第一個與最後一個＜li＞上添加額外的類名：

1 <ul>
2     <li class="first"><a href="#">Why?</a></li>
3     <li><a href="#">Synopsis</a></li>
4     <li><a href="#">Stills/Photos</a></li>
5     <li><a href="#">Videos/clips</a></li>
6     <li><a href="#">Quotes</a></li>
7     <li class="last"><a href="#">Quiz</a></li>
8 </ul>

 1 li {
 2 margin-left: 5%;
 3 margin-right: 5%;
 4 }
 5 .first {
 6 margin-left: 0px;
 7 }
 8 .last {
 9 margin-right: 0px;
10 }

這樣固然能解決以上問題，但不夠靈活，有可能有時會嚮導航後添加新的導航項，這樣作就有點尷尬了。

2、重點來了：

CSS2.1已經有了 :first-child 結構僞類

CSS3中新增了:last-child 結構僞類

配合這兩個結構僞類，咱們不須要額外的給li添加類名了。

 1 <nav role="navigation">
 2 　　<ul>
 3         <li><a href="#">Why?</a></li>
 4         <li><a href="#">Synopsis</a></li>
 5         <li><a href="#">Stills/Photos</a></li>
 6         <li><a href="#">Videos/clips</a></li>
 7         <li><a href="#">Quotes</a></li>
 8         <li><a href="#">Quiz</a></li>
 9     </ul>
10 </nav>        

1 nav ul li:last-child {
2 　　text-align: right;
3 }
4 nav ul li:first-child {
5 　　text-align: left;
6 }

3、再來介紹一個結構僞類：nth-child 選擇器

咱們常常看到這麼樣的效果：

　　一個奇偶相間的不一樣顏色條紋的表格:

　　

　　或者是：

　　

　　好吧，CSS3一句話搞定上面的效果：

　　 1 nav ul li:nth-child(even) a {  color: #fe0208;  } 

       

　　用法很簡單，但理解了才能更好運用！

 

理解 nth 規則的做用：

　　CSS3 提供了一些基於 nth 的規則，這些規則包括 :

　　:nth-child(n) 、 :nth-last-child(n) 、 :nth-of-type(n) 以及 :nth-last-of-type(n)

　　a.使用整數，如 :nth-child(2) ——這會選中列表中第二個列表項；

　　b.使用數值表達式，如 :nth-child(3n+1) ——這樣會從第一個元素開始，而後每三個元素選一個。

　　(其實n=0,1,2……往表達式代入就知道選取的是哪一個元素了。)

　　c.數值表達式中也可使用負數.例如 :nth-child(3n-2) ，即表示從倒數第 2 個元素開始而後每三個元素選擇一個。

　　d.child 和  last-child 的區別在於， last-child 是從文檔節點樹的末尾開始算

　　e.:nth-last-of-type能夠指定你想選擇的元素類型,例如：

1 <ul>
2 　　<li class="internal"><a href="#">Why?</a></li>
3 　　<li><a href="#">Synopsis</a></li>
4 　　<li class="internal"><a href="#">Stills/Photos</a></li>
5 　　<li class="internal"><a href="#">Videos/clips</a></li>
6 　　<li class="internal"><a href="#">Quotes</a></li>
7 　　<li class="internal"><a href="#">Quiz</a></li>
8 </ul>

　　注意上面的第二個列表項沒有 internal 類。

 1 nav ul li.internal:nth-of-type(n+2) a {  color: #fe0208;  } 

　　即從第二個匹配元素開始，選擇每個類名爲 internal 的列表項。

4、另一個比較有意思的選擇器：否認（:not）選擇器

用於選擇不知足某些條件的元素。例如，繼續使用前面例子中的結構代碼：

1 <ul>
2 　　<li class="internal"><a href="#">Why?</a></li>
3 　　<li><a href="#">Synopsis</a></li>
4 　　<li class="internal"><a href="#">Stills/Photos</a></li>
5 　　<li class="internal"><a href="#">Videos/clips</a></li>
6 　　<li class="internal"><a href="#">Quotes</a></li>
7 　　<li class="internal"><a href="#">Quiz</a></li>
8 </ul>

將規則修改成：

 1 nav ul li:not(.internal) a {  color: #fe0208;  } 

能夠看出咱們是想選擇沒有 internal 類的列表項：

5、對僞元素的修正

僞元素在 CSS2 中已經存在，CSS3 標準對其語法作了一些細微的修正。

例如：

 p:first-line 會選中 <p> 標籤的第一行內容

 p:first-letter 會選中其中的第一個字母

CSS3要求對僞元素使用兩個冒號以便與僞類進行區別

 因此在CSS3中須要這麼寫：

 p::first-letter

 注意IE8及如下版本是沒法識別兩個冒號的語法。