知识点

属性选择器 --> 元素[属性=属性值]
应用场景：选择具有某些属性的元素
name
name = value
name ^= value
name $= value
name：属性名
可以理解为筛选条件

Demo

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
            input{
                height: 30px;
            }
            
            /* 选中具有name属性的元素 */
            /* 属性：开始标签后面 属性名="值" */
            input[name]{
                border: solid 1px red;
            }
            
            /* 选中input中type=password的元素 */
            input[type=password]{
                border: solid blue 1px;
            }
            
            /* 表示以什么东西开头的都会被选中 */
            /* 选中input中 name值以u开头的那些元素 */
            input[name^=c]{
                border: solid brown 1px;
            }
            
            /* 表示以什么东西结尾的都会被选中 */
            /* 选中input中 name值以p开头的那些元素 */
            input[name$=p]{
                border: solid chartreuse 1px;
            }
            
        </style>
    </head>
    <body>
        <!-- 表单 type="text" 输入框  -->
        <input type="text" name="username" id="" value="" />
        <input type="text" name="cccada"/>
        <input type="text" name="cccadapppp"/>
        <!-- type="password"  密码框  -->
        <input type="password" name="password" />
        
    </body>
</html>
最后修改：2019 年 11 月 02 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏