HTML5中CSS3的状态伪类选择器

最新推荐文章于 2022-11-02 23:34:40 发布

枕梦

最新推荐文章于 2022-11-02 23:34:40 发布

阅读量1.1k

点赞数

分类专栏： HTML5+CSS 文章标签：状态伪类选择器

本文链接：https://blog.csdn.net/qq_37768482/article/details/71480867

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

状态伪类选择器：

E:checked

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:disabled


 
 
  
  匹配用户界面上处于禁用状态的元素E。

E:enabled


 
 
  
  匹配用户界面上处于可用状态的元素E。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input:checked + span{
            color: red;
        }
        input[type="text"]:enabled{
            border: 1px solid green;
            background: #fff;
            color: red;
        }
        input[type="text"]:disabled{
            border: 1px solid red;
            background: #fff;
            color: #84fff7;
        }
    </style>
    <title>状态伪类选择器</title>
</head>
<body>
<form action="">
    <label for="a">
        <input id="a" type="radio" name="sex" value="1">
        <span>男</span>
    </label>
    <label for="b">
        <input id="b" type="radio" name="sex" value="2">
        <span>女</span>
    </label>
    <br>
    <label for="c">
        <span>姓名:</span>
        <input id="c" type="text">
    </label>
    <br>
    <label for="d">
        <span>地址:</span>
        <input id="d" type="text" disabled>
    </label>
</form>
</body>
</html>