CSS9 伪类和伪元素

1 什么叫伪类，什么叫伪元素

1.我们已经知道在创建标签的时候，可以为很多的标签指定相同的类名，可以通过类名选择器选择这些标签并且为他们设置css样式。但是有许多具有相同特征的标签，我们很难表示他们，例如如何表示一个鼠标正在其上面的链接？等等。
2.伪类是一系列已经描述好了的类名，通过这些类名选择器我们可以选择到一些相同特征的标签。
3.伪元素则可以表示一个标签里面某些特定的内容
4.使用方法

选择器：伪类或伪元素
{}

2 常见的伪类

2.1 anchor伪类

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
顺序最好就是按照下面写

    <style>
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */
    </style>

注意并不是仅仅只有链接标签a有这个伪类，任何标签都有这个伪类。

2.2 子元素伪类

父元素:first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
父元素:last-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。

2.3 lang伪类，选择特定语言的标签

lang属性是html5的新属性，没有实际意义，只是通过语言代码表明了语言的种类。
语言代码参考
http://www.w3school.com.cn/tags/html_ref_language_codes.asp
例如下面表示一句话语言类型为中文

<p lang="zh">中国</p>

可以通过css选取中文语言并且设置

   <style>
        p:lang(zh)
        {
            background:yellow;
        }
    </style>

2.4 更多伪类，参考

http://www.runoob.com/css/css-pseudo-classes.html

3 常见的伪元素

3.1:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

实例

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}
：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

3.2 :first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

注意： “first-letter” 伪元素只能用于块级元素。

注意： 下面的属性可应用于 “first-letter” 伪元素：

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