电话
13363039260
css中伪类与伪元素如何使用
2024-01-18 10:58 小编
伪类
它是选择html文档的某些部分的方式，表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态，原则上不属于html文档树本身及其元素或者是属性，其实CSS伪类是用来添加一些选择器的特殊效果，与伪元素不同，伪类可以出现在选择器链中的任何位置。
例
a：link表示未访问过的链接
<style>
a:link{
background-color:pink;
}
Image1.jpg
a:visit表示已访问过的链接
a:visited{
background-color:pink;
}
Image7.jpg
a：hover当鼠标移动到链接上时
a:hover{
background-color:pink;
}
Image1.jpg
a:hover必须位于a:link和a:visited之后，这样才能生效！
a：active：表示选中的链接
a:hover{
background-color:pink;
}
a:active{
background-color:pink;
}
Image6.jpg
注意active一定要用在hover后面才会生效
伪元素用于向某些选择器设置特殊效果，而且只能应用于外部和文档级上下文，而不是内嵌样式。它们可能只出现在选择器链的末尾，每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器或声明语句。
：first-line伪元素
用于向文本的首行设置特殊样式，只能用于块级元素
可以修改以下属性font，color，background，word-spacing，letter-spacing等
p:first-line
{
color:pink;
font-variant:small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
youareverygood!
</p>
适用首行
Image8.jpg
：first-letter伪元素
用于向文本的首字母设置特殊样式：
可以修改font，color，background，margin，padding，border等属性
p:first-letter
{
color:pink;
font-variant:small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
youareverygood!
猜你喜欢
联络方式：
13363039260
微信二维码 