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

2017-06-11  本文已影响0人  Java小工匠

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

上一篇 下一篇

猜你喜欢

热点阅读