2、偽類和偽元素
A、 :hover後面的後代選擇器
範例
| a:hover span { color: #0f0; } |
描述
一個元素可以被:hover偽類後面的選擇器定位，就像後代選擇器一樣。上面的例子，在滑鼠懸停的時候，將會改變a元素內的span元素中的文字的顏色。
支持情況
| IE6 No IE7 Yes IE8 Yes |
B、 鏈偽類
範例
| a:first-child:hover { color: #0f0; } |
描述
偽類可以鏈起來以縮小元素選擇。上面的範例會定位每一個父級元素下的第一個a標籤，並將hover偽類P套用到它上。
支持情況
| IE6 No IE7 Yes IE8 Yes |
C、 非錨點元素中的:hover
範例
| div:hover { color: #f00; } |
描述
:hover偽類可以應用到任何元素的懸停狀態，而不只是a標籤。
支持情況
| IE6 No IE7 Yes IE8 Yes |
D、 :first-child偽類
範例
| div li:first-child { background: blue; } |
描述
改偽類別定位每一個指定的元素的父級元素的第一個子元素。
支持情況
| IE6 No IE7 Yes IE8 Yes |
Bugs
IE7中，如果要定位的第一個子元素之前有HTML註釋，first-child偽類別將會無效
E、 :focus偽類
範例
| a:focus { border: 1px solid red; } |
描述
此偽類定位有鍵盤焦點的所有元素。
支持情況
| IE6 No IE7 No IE8 Yes |
F、 :before 和:after 偽類
範例
| #box:before { content: "本段文字在盒子前面"; } #box:after { content: "本段文字在盒子後面"; } |
描述
這兩個偽元素分別在指定元素的前面和後面加入產生的內容，結合content屬性一起使用。
支持情況
| IE6 No IE7 No IE8 Yes |
3、屬性支持
A、由position產生的實際大小
範例
| #box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue; } |
描述
定義top, right, bottom, 和left 值到絕對定位的元素上將給這個元素實際的大小(寬度和高度)，雖然並沒有設定使寬度和高度值。
支持情況
| IE6 No IE7 Yes IE8 Yes |
B、Min-Height 與Min-Width
範例
| #box { min-height: 500px; min-width: 300px; } |
描述
這兩個屬性分別指定元素的寬和高的最小值，允許一個盒子可以比指定的最小值更大，但不能更小。它們兩個可以一起使用，也可以分開來用。
支持情況
| IE6 No IE7 Yes IE8 Yes |
C、Max-Height 和Max-Width
範例
| #box { max-height: 500px; max-width: 300px; } |
描述
這兩個屬性分別指定元素的高和寬的最大值，允許一個盒子比這個指定的最大值小，但是不能更大。它們也可以同時使用或單獨使用。
支持情況
| IE6 No IE7 Yes IE8 Yes |