css（四）

最新推荐文章于 2023-07-27 18:50:32 发布

捷。

最新推荐文章于 2023-07-27 18:50:32 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/qq_46151129/article/details/109882993

版权

伪类

注：伪类不区别大小写
语法：选择器：伪类{attr:value;}
css类也可以使用伪类：选择器class：伪类{attr:value;}
1.超链接伪类
链接的不同状态都可以以不同的方式显示
a

:link{color:#FF0000;}         /* 未访问的链接显示为红色 */
a:visited{color:#00FF00;}      /* 已访问的链接显示为绿色 */
a:hover{color:#FF00FF;}        /* 鼠标划过链接显示为紫红色 */
a:active{color:#0000FF;}       /* 已选中的链接显示为蓝色 */

注：a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后。
2.伪类和css类
3.first—child伪类

<body>
    <p>第一个 p 元素</p>
    <p>第二个 p 元素</p>
    <p>第三个 p 元素</p>
</body>

选择作为任何元素的第一个子元素 p。选择器使用 p:first-child。
选择所有 p 元素中的第一个子元素 b。选择器使用 p>b:first-child。
选择所有作为第一个子元素 p 中的所有 b 元素。选择器使用 p:first-child b。
4.lang伪类
lang伪类可以为不同的语言定义特殊的规则

html:lang(zh-CN){
    color:blue;
}

:lang(en)>p{
    color:gray;
}

伪元素

定义：为一些选择器添加特殊的效果
语法：选择器：伪元素{attr:value;}
css也可以使用伪元素：选择器class：伪元素{attr:value;}

before伪元素

h1:before{
     content:url(images/logo.gif);
}

after伪元素

h1:after{
     content:url(images/logo.gif);
}

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素之前或之后放置的生成内容。

content 的内容一般可以为四种：
1.content:none 该值是默认值，不插入内容。
2.content:“string” 插入文本。
3.content:attr 插入标签属性值。
4.content:url 使用指定的绝对或相对地址插入一个外部资源，可以是图像，音频，视频或浏览器支持的其他任何资源。