admin管理员组文章数量:1794759
零基础CSS入门教程(23)–伪类选择器
点此查看 所有教程、项目、源码导航
本文目录- 1. 前言
- 2. 实例解析
- 3. 小结
我们之前讲过了许多种选择器，比如元素选择器、id选择器、class选择器、分组选择器、嵌套选择器。
这些选择器，都是用来选择某个、或者某些元素的。
但是其实还有一些更高级的选择方式，例如选择处于某种状态的元素。比如超级链接，有未点击过的、有已点击过的、有鼠标悬停的、也有点击那一刻的。
我们可以通过伪类选择器，来选择这些特殊的状态的元素。至于为啥叫伪类，可能跟它们不是正儿八经的类，只是处于某种状态的类有关系。
2. 实例解析我们以超级链接元素常用的伪类选择器为例进行演示：
<head> <meta charset="utf-8"> <style> /* 未点击过的链接 */ a:link { color: grey; } /* 已点击过的链接 */ a:visited { color: red; } /* 鼠标悬停的链接 */ a:hover { color: blue; } /* 点击那一刻的链接 */ a:active { color: green; } </style> </head> <body> <a href="www.baidu">点此访问百度</a> </body>我们通过伪类选择器，设定了不同状态下超级链接的样式。
所以未点击时，效果如下：
当鼠标悬停时，颜色会变为蓝色；当点击那一刻，颜色会变为绿色。再次返回该网页，因为已经点击过，颜色会变为红色。大家可以自己尝试下。
3. 小结伪类选择器拓展了CSS选择器的功能，让我们可以把样式应用的更灵活更方便。
实际在项目开发过程中，大家可以接触到更多的伪类选择器。
版权声明：本文标题：零基础CSS入门教程(23)–伪类选择器 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686974185a124272.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论