JavaWeb学习之路(46)–CSS之伪类选择器

1. 前言

我们之前讲过了许多种选择器,比如元素选择器、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="http://www.baidu.com">点此访问百度</a>

</body>


我们通过伪类选择器,设定了不同状态下超级链接的样式。


所以未点击时,效果如下:



当鼠标悬停时,颜色会变为蓝色;当点击那一刻,颜色会变为绿色。再次返回该网页,因为已经点击过,颜色会变为红色。大家可以自己尝试下。


3. 小结

伪类选择器拓展了CSS选择器的功能,让我们可以把样式应用的更灵活更方便。


实际在项目开发过程中,大家可以接触到更多的伪类选择器。


上一篇:JavaWeb学习之路(49)–CSS应用实例之按钮


下一篇:JavaWeb学习之路(51)–CSS应用实例之导航栏