CSS-选择器8-A与input常用伪类

最新推荐文章于 2023-06-29 17:29:19 发布

weixin_34376986

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量1.1k

点赞数 1

原文链接：https://yq.aliyun.com/articles/605574

版权

CSS选择器-系列文章

1、选择器说明

选择器	例子	例子描述	CSS
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:checked	input:checked	选择每个被选中的 input 元素。	3
:enabled	input:enabled	选择每个启用的 input 元素。	3
:disabled	input:disabled	选择每个禁用的 input 元素	3

2、效果演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪类选择器</title>
    <style type="text/css">
        a:link{
            color: gray;
            text-decoration: none;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: blue;
        }
        .input1:focus{
            background: red;
        }
        .input2:hover{
            background: red;
        }
        .input3:active{
            background: red;
        }
        .input4:disabled{
            background: red;
        }
        .input5:checked{
            outline: 2px solid red;
        }
    </style>
</head>
<body>
   <a href="test1.html">测试1</a><br/>
   <a href="test2.html">测试2</a><br/>
   <a href="test3.html">测试3</a><br/>
   <a href="test4.html">测试4</a><br/>
   <a href="test5.html">测试5</a><br/>
   <input class="input1"/>获取焦点背景变红<br/>
   <input class="input2"/>鼠标经过背景变红<br/>
   <input class="input3"/>激活鼠标按下背景变红<br/>
   <input class="input4" disabled="true"/>禁用背景变红<br>
   <input class="input5" type="checkbox"/>选择边框变红</input>
</body>
</html>

运行效果，由于是交互效果，需要阅读者自行尝试。

CSS选择器-系列文章
 下一节 CSS-选择器9-first-letter、first-line、selection

weixin_34376986

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择器8-A与input常用伪类

CSS选择器-系列文章1、选择器说明选择器例子例子描述CSS:linka:link选择所有未被访问的链接。1:visiteda:visited选择所有已被访问的链接。1:activea:active选择活动链接。1:hovera:hover选择鼠标...
复制链接

扫一扫