CSS Pseudo-classes & Pseudo-elements
Pseudo-classes
A Pseudo-class is used to define a special state of an element.
CSS伪类是用于给一个元素定义一个特殊的状态。
语法：
selector:pseudo-class {
property:value;
}
常见的如 元素的四种状态。具体说明参看 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 将匹配一个特定的元素，它是另一个元素的第一个孩子元素。
如下例，将匹配任何一个元素下第一个 元素
I am a strong man.
I am a strong man.
Note: For :first-child to work in IE8 and earlier, a !DOCTYPE must be declared.
Examples：
1. Match the first element in all
elements
p i:first-child
{
color:blue; /*p可以有很多子孙元素i，此处选第一个子孙i,且对所有p执行此操作*/
} 2. Match all elements in all first child
elements
p:first-child i
{
color:blue;/*页面中第一个p元素下匹配所有它的后代i元素*/
}The :lang(language)
使用这个伪类实现针对不同语言设定不同规则。
在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型
Some text A quote in a paragraph
Some text.
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. 几个伪元素可以结合起来用，即可以对 同时使用以上两个伪元素。
The ::before
Used to insert some content before the content of an element.
用于在一个元素的内容前面插入一些内容，类似 js 数组的 unshift() 操作。
如下例在每一个
元素前添加一张图片。
h1::before
{
content:url(smiley.gif);
}
The ::after
h1::before
{
content:url(smiley.gif);
}Used to insert some content after the content of an element.
顾名思义，在一个元素的内容后面插入一些内容，类似 js 数组的 push() 操作。
p::after
{
content:"- Remember this";
}还可在content后继续添加 css declaration 丰富效果。
Note: 使以上两个伪元素可以在 IE8下工作, a must be declared.
The ::selection
该伪元素匹配用户用鼠标所选择的一个元素的一部分。可以用户该伪元素的 CSS 性质有：color，background，cursor 和 outline。
::selection {
color: red;
background: yellow;
}上面的例子使得所选择的文字显示为红色，背景色为黄色。
使用时注意浏览器支持情况！