CSS3基础教程(四) - 博客详情

所谓伪类选择器，是指同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

1.anchor伪类

a:link {color:#FF0000;} / 未访问的链接 / a:visited {color:#00FF00;} / 已访问的链接 / a:hover {color:#FF00FF;} / 鼠标划过链接 / a:active {color:#0000FF;} / 已选中的链接 /

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>伪类选择器</title>
    <style>


        /*让超链接点击之前是红色*/
        a:link{
            color:red;
        }

        /*让超链接点击之后是绿色*/
        a:visited{
            color:orange;
        }
        /*鼠标悬停，放到标签上的时候*/
        a:hover{
            color:green;
        }

        /*鼠标点击链接，但是不松手的时候*/
        a:active{
            color:blue;
        }
    </style>
</head>
<body>

<h1>伪类选择器</h1>

<a href="https://www.baidu.com">百度</a><br>
</body>
</html>

运行效果(当鼠标悬停在超链接上时颜色为绿色)

==注意:在css中，这四种状态必须按照固定的顺序写：a:link 、a:visited 、a:hover 、a:active.==

2.其它伪类选择器

还有有以下其它常用的伪类选择器如下： :first-child 伪类来选择元素的第一个子元素。 :focus 伪类选择获得焦点的元素 :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

实例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>其它类选择器</title>
    <style>
        li:first-child{
            color: red;
        }

        input:focus
        {
            background-color:yellow;
        }

        input:checked{
            outline: 5px solid green;

        }

    </style>
</head>
<body>

<h1>其它伪类选择器</h1>

<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

<form action="" method="get">
    用户名: <input type="text" name="username"/><br>
    密码: <input type="password" name="password"/><br>
    爱好:<input type="checkbox" name="favorites" value="music">音乐 <input type="checkbox" name="favorites" value="movie"/>电影<input type="checkbox" name="favorites" value="soccer"/>足球<br/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

运行效果：