css偽類與偽元素
在css1中就引入了偽類和偽元素的概念，偽類可以對一個元素的不同狀態或者型別進行區分，新增特殊效果。偽元素能為元素的組成部分，或是文字結點內容新增特殊效果。
偽類
我的導師曾說"認識事物可以採用分類法，簡單化事物採用分步法"。我們都知道偽類在css1中就存在了，是在HTML元素處於某種狀態時，為該元素新增css樣式。之後，css2,css3又新增和完善了好些偽類。結構化偽類
結構化偽類常被用於選擇那些簡單選擇器無法訪問的元素，這種元素在結構上存在某種關係(如某個元素的第一個或最後一個或者倍數個)，為選中的元素新增css樣式。|
選擇符 |
描述 |
|
E：first-child |
匹配父元素的第一個子元素E。 |
|
E：last-child |
匹配父元素的最後一個子元素E。 |
|
E：only-child |
匹配父元素僅有的一個子元素E。 |
|
E：only-of-type |
匹配同類型中的唯一的一個同級兄弟元素E。 |
|
E：first-of-type |
匹配同類型中的第一個同級兄弟元素E。 |
|
E：last-of-type |
匹配同類型中的最後一個同級兄弟元素E。 |
|
E：nth-child(n) |
匹配父元素的第n個子元素E。 |
| E：nth-last-child(n) |
匹配父元素的倒數第n個子元素E。 |
|
E：nth-last-type(n) |
匹配同類型中的第n個同級兄弟元素E。 |
|
E：nth-last-of-type(n) |
匹配同類型中的倒數第n個同級兄弟元素E。 |
UI元素狀態偽類
UI元素狀態偽類用於根據UI元素的狀態對他們進行選擇。|
選擇符 |
描述 |
|
E：link |
設定超連結a在未被訪問前的樣式。 |
|
E：visited |
設定超連結a在其連結地址已被訪問過時的樣式。 |
|
E：hover |
設定元素在其滑鼠懸停時的樣式。 |
|
E：active |
設定元素在被使用者啟用（在滑鼠點選與釋放之間發生的事件）時的樣式。 |
|
E：checked |
匹配使用者介面上處於選中狀態的元素E。(用於input type為radio與checkbox時) |
|
E：enabled |
匹配使用者介面上處於可用狀態的元素E。 |
|
E：disabled |
匹配使用者介面上處於禁用狀態的元素E。 |
其他偽類
|
選擇符 |
描述 |
|
E：target |
匹配相關URL指向的E元素。 |
|
E：empty |
匹配沒有任何子元素（包括text節點）的元素E。 |
|
E：root |
匹配E元素在文件的根元素。 |
|
E：not(s) |
匹配不含有s選擇符的元素E。 |
偽元素
與偽類一樣，偽元素提供的也是文件樹中沒有具體指明的資訊，但不同的是偽類是作用在元素上，而偽元素作用的更深一層：在元素中的特定內容上。CSS3將偽元素前面的單個修改為雙冒號用以區別偽類，但以前的寫法仍然有效。
|
選擇符 |
描述 |
|
E::first-letter |
設定物件內的第一個字元的樣式。 |
|
E::first-line |
設定物件內的第一行的樣式。 |
|
E::before |
設定在物件前（依據物件樹的邏輯結構）發生的內容。用來和content屬性一起使用 |
|
E::after |
設定在物件後（依據物件樹的邏輯結構）發生的內容。用來和content屬性一起使用 |
區別
簡單的在這裡舉個偽類和偽元素區別的例子
偽類
<style type="text/css">
div > p:nth-child(2){
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
<body>
<div>
<p>這是第一個P標籤</p>
<p>這是第二個P標籤</p>
<p>這是第三個P標籤</p>
<p>這是第四個P標籤</p>
</div>
</body>
如果我們不使用偽類呢？想要給第二個P標籤新增樣式，就可以給第二個P標籤新增一個class樣式。例如：
<style type="text/css">
.second{
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
<body>
<div>
<p>這是第一個P標籤</p>
<p class="second">這是第二個P標籤</p>
<p>這是第三個P標籤</p>
<p>這是第四個P標籤</p>
</div>
</body>偽元素
<style type="text/css">
.second{
width: 180px;
}
.second::first-line{
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
<body>
<div>
<p>這是第一個P標籤</p>
<p class="second">
這是第二個P標籤
這是第二個P標籤
這是第二個P標籤
這是第二個P標籤
</p>
<p>這是第三個P標籤</p>
<p>這是第四個P標籤</p>
</div>
</body>
我們可以看到第二個P標籤的第一行文字內容改變了樣式，如果不使用偽元素的話，可以將第一行文字巢狀在一個span標籤內，設定span的樣式達到效果。
<style type="text/css">
.second{
width: 180px;
}
.span{
font-size: 20px;
color: red;
font-weight: bold;
}
</style>
<body>
<div>
<p>這是第一個P標籤</p>
<p class="second">
<span class="span">這是第二個P標籤</span>
這是第二個P標籤
這是第二個P標籤
這是第二個P標籤
</p>
<p>這是第三個P標籤</p>
<p>這是第四個P標籤</p>
</div>
</body>