首页 / CSS / css中伪类与伪元素如何使用

css中伪类与伪元素如何使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css中伪类与伪元素如何使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1686字，纯文字阅读大概需要3分钟。

内容图文

伪类可以通过link,hover等方法给选择器添加特殊效果，伪元素通过：first-line添加首行样式，：first-letter添加首字母样，以下将详细介绍这两方面的内容

伪类

它是选择html文档的某些部分的方式，表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态，原则上不属于html文档树本身及其元素或者是属性，其实CSS伪类是用来添加一些选择器的特殊效果，与伪元素不同，伪类可以出现在选择器链中的任何位置。

例

a：link 表示未访问过的链接

<style>
a:link{
background-color: pink;
}

css中伪类与伪元素如何使用 - 文章图片

a : visit表示已访问过的链接

a:visited{
background-color: pink;
}


css中伪类与伪元素如何使用 - 文章图片

a：hover当鼠标移动到链接上时

a:hover{
background-color: pink;
}

css中伪类与伪元素如何使用 - 文章图片

a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

a：active ：表示选中的链接

a:hover{
background-color: pink;
}
		a:active{
background-color: pink;
}

css中伪类与伪元素如何使用 - 文章图片

注意active一定要用在hover后面才会生效

伪元素

伪元素用于向某些选择器设置特殊效果，而且只能应用于外部和文档级上下文 ， 而不是内嵌样式。它们可能只出现在选择器链的末尾，每个选择器只能指定一个伪元素。要在单个元素结构上处理多个伪元素，必须创建多个样式选择器或声明语句。

：first-line伪元素

用于向文本的首行设置特殊样式，只能用于块级元素

可以修改以下属性font，color，background，word-spacing，letter-spacing等

p:first-line 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!
</p>


适用首行

css中伪类与伪元素如何使用 - 文章图片

：first-letter伪元素

用于向文本的首字母设置特殊样式：

可以修改font，color，background，margin，padding，border等属性

p:first-letter 
{
color: pink;
font-variant: small-caps;/*改为大写*/

}
</style>
</head>
<body>
<p>
you are very good!

仅适用于首字母

css中伪类与伪元素如何使用 - 文章图片


总结：以上就是本篇文章的全部内容了，希望对大家的学习有所帮助。

以上就是css中伪类与伪元素如何使用的详细内容。

内容总结

以上是互联网集市为您收集整理的css中伪类与伪元素如何使用全部内容，希望文章能够帮你解决css中伪类与伪元素如何使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/417696.html

来源：【匿名】