属性选择器

知识点

属性选择器 --> 元素[属性=属性值]
应用场景:选择具有某些属性的元素
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>
文章名: 《属性选择器》

本文链接:https://lula.fun/769.html

除特别注明外,文章均由 Lula(噜啦) 原创

 原创文章 转载时请注明 出处 以及文章链接
最后修改:2019 年 11 月 02 日 01 : 43 PM

发表评论

1 条评论

  1. 京泠长夜·冷泠龙夜

    好像有点意思