僞類和僞元素

本文地址：http://www.cnblogs.com/veinyin/p/7606766.html 

 

僞類和僞元素使用起來要比屬性選擇器更加炫酷呢~ 

1 a元素的僞類

a元素的僞類包括：

1. :link　　2. :visited　　3. :focus　　4. :hover　　5. :active

　　通常來講，咱們在設置連接樣式的時候使用1 2 4 這三個僞類就足夠了，由於咱們只須要設置連接點擊先後與懸停時的樣式頁面可用性就已經很不錯了。默認最佳順序即爲上述順序。固然 :focus 僞類不單單隻能用於連接，如如下語句使得focus處背景爲銀色，同時字體加粗：

1 input :focus{
2     background: sliver;
3     font-weight: bold;
4 }

IE7不支持對錶單元素應用focus 

2、:first-child 僞類

　　:first-child 是一個極易產生誤解的僞類，一直以來我對它的理解都是錯誤的，直到我意識到了一個問題，下面是按照 《 CSS權威指南 》 中的示例代碼手敲的，發現 在chrome 與 IE 中測試均非書上效果，如下是我手打的代碼

HTML：

1 <div>
2     <p>there are the necessary steps:</p>
3     <ul>
4         <li>Insert key</li>
5         <li>Turn key <strong>clockwise</strong></li>
6         <li>Push</li>
7     </ul>
8     <p>Do <em>not</em> push the brake</p>
9 </div>

CSS：

1 p :first-child{
2     font-weight: bold;
3 }
4 
5 li :first-child{
6     text-transform: uppercase;
7 }

 

上例效果：

由此我獲得結論 :first-child 選擇的是 p 和 li 的第一個子元素，而非書上所說選擇的第一個 p 元素和第一個 li 元素，而書上的講解有錯誤，一直到我在作第四點的測試時，意識到了本身犯了一個超級超級大的錯誤： 在冒號以前加了空格鍵！這幾乎是不能原諒的....

去掉我私自加的空格以後獲得結果正確，尷尬....

IE6 前不支持 :first-child， IE7 支持 

3 結合僞類

結合僞類是我第一次學習時未接觸到的，感受很新奇呀，必須試試 \^o^/

1 a:link:hover{
2     color: red;     //未訪問連接鼠標懸停時顏色爲紅色
3 }
4 
5 a:visited:hover{
6     color: yellow;      //已訪問連接鼠標懸停時顏色爲黃色
7 }

親測可用哦~ 不過實際中不要用這兩個顏色，這是記筆記比十六進制的顏色要方便查看些而已，要否則整個頁面被老闆看到了會被扣獎金的~

IE6 前不支持，只能識別到最後一個僞類，IE7 支持 

4  :before　:after

可用於在元素先後插入內容，沒錯，我又又又又加了空格！致使的直接結果就是我不斷刷新頁面，結果出現的東西與我預期的區別實在是太大了

1 <h1>標題</h1>
2 <p>文本內容</p>

 

1 h1 :before{
2     content: "[]";
3     color: red;
4 }
5 
6 body :after{
7     content: "The End!"
8 }

這是讓我感到疑惑的結果 

因而我開始查看代碼，但是代碼如此簡單，只有幾行，很快我就獲得了上面的結論，去掉空格後果真就大不相同了~ 

加上空格就至關因而子孫選擇器了，因此不要隨意加空格，這是十分很差的習慣，我就是在寫到這裏時才發現本身以前用到的僞類全都加上了空格，還好曾經都是給連接加樣式，是能夠識別的 

5 如下是僞類僞元素無關的補充

既然寫到加空格，那就再多說一個。

url(http://xxxxx.com)

要注意必定不可以在 url 與 括號之間加上空格，不然會被忽視掉

END~~~≥ω≤