Pseudo-classes
A Pseudo-class is used to define a special state of an element.
CSS僞類是用於給一個元素定義一個特殊的狀態。
語法：
selector:pseudo-class {
property:value;
}
常見的如 <a> 元素的四種狀態。具體說明參看 CSS Links 章節
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */Note: Pseudo-class names are not case-sensitive.
僞類名稱大小寫不敏感。
Pseudo-classes 可以與CSS classes結合使用。
a.highlight:hover {
color: #ff0000;
}The :first-child
The :first-child pseudo-class matches a specified element that is the first child of another element.
selector:first-child 將匹配一個特定的元素，它是另一個元素的第一個孩子元素。
如下例，將匹配任何一個元素下第一個<p> 元素。
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>Note: For :first-child to work in IE8 and earlier, a !DOCTYPE must be declared.
Examples：
1. Match the first <i> element in all <p> elements
p i:first-child
{
color:blue; /*p可以有很多子孫元素i，此處選第一個子孫i,且對所有p執行此操作*/
} 2. Match all <i> elements in all first child <p> elements
p:first-child i
{
color:blue;/*頁面中第一個p元素下匹配所有它的後代i元素*/
}The :lang(language)
使用這個僞類實現針對不同語言設定不同規則。
在下面的例子中，:lang 類爲屬性值爲 no 的 q 元素定義引號的類型
<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>Note: IE8 supports the :lang pseudo-class only if a !DOCTYP is specified.
The :focus
The :focus selector is used to select the element that has focus and is allowed on elements that accept keyboard events or other user inputs.
選擇那些有焦點的元素，允許在那些可以接受鍵盤事件或其他用戶輸入的元素上使用。
如下例，點擊輸入框，它的背景色將變成黃色。
input:focus
{
background-color:yellow;
}Note:For :focus to work in IE8, a !DOCTYPE must be declared.
Pseudo-element
僞元素是用來給一個元素指定的部分樣式化。
語法：
selector::pseudo-element {
property:value;
}
The double colon replaced the single-colon notation for
pseudo-elements in CSS3.
This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.
在CSS3中用於僞元素的notation，雙冒號取代了單個冒號，這是用來區別僞類和僞元素。
The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.
For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.
The ::first-line
This is used to add a special style to the first line of a text and can only be applied to block-level elements.
用於給一段文本中的第一行文字添加特殊效果。只能用於塊級元素。
The following properties apply to the ::first-line pseudo-element 可應用到該僞元素的性質有：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
The ::first-letter
用於給一段文本中第一個字母添加特效，同樣只適用於塊級元素。
The following properties apply to the ::first-letter pseudo- element 可應用到該僞元素的性質有
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Tip： Several pseudo-elements can also be combined. 幾個僞元素可以結合起來用，即可以對 <p> 同時使用以上兩個僞元素。
The ::before
Used to insert some content before the content of an element.
用於在一個元素的內容前面插入一些內容，類似 js 數組的 unshift() 操作。
如下例在每一個<h1>元素前添加一張圖片。
h1::before
{
content:url(smiley.gif);
}The ::after
Used to insert some content after the content of an element.
顧名思義，在一個元素的內容後面插入一些內容，類似 js 數組的 push() 操作。
p::after
{
content:"- Remember this";
}還可在content後繼續添加 css declaration 豐富效果。
Note: 使以上兩個僞元素可以在 IE8下工作, a <!DOCTYPE> must be declared.
The ::selection
該僞元素匹配用戶用鼠標所選擇的一個元素的一部分。可以用戶該僞元素的 CSS 性質有：color，background，cursor 和 outline。
::selection {
color: red;
background: yellow;
}上面的例子使得所選擇的文字顯示爲紅色，背景色爲黃色。
使用時注意瀏覽器支持情況！