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

猜你喜欢

转载自blog.csdn.net/weixin_44055272/article/details/88992533