爱陪小樱桃

导航

 

标签(空格分隔): 属性选择器


属性选择器:

除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素

根据属性查找

[title] {
  color: red;
}

根据属性和值查找

找到所有title属性等于hello的元素:

[title="hello"] {
  color: red;
}

找到所有title属性以hello开头的元素:

[title^="hello"] {
  color: red;
}

找到所有title属性以hello结尾的元素:

[title$="hello"] {
  color: red;
}

找到所有title属性中包含(字符串包含)hello的元素:

[title*="hello"] {
  color: red;
}

表单常用

input[type="text"] {
  backgroundcolor: red;
}

如下代码案例;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style tyep="text/css">
        label[for]{
            color:red;
            font-size: 20px;
        }
        label[for='pwd']{
            color:yellow;
        }
        /*以。。。开头*/
        label[for^='vip']{
            color:yellow;
        }
        /*以。。。结尾*/
        label[for$='vip']{
            color:gray;
        }
        /*找到所有属性中包含。。。。*/
        label[for*='user']{

            color:gold;
        }
       /*属性选择器,通常在表单控件中使用比较频繁*/
    </style>

</head>
<body>
    <div class="box">
        <form action="">
            <label for="user">用户名:</label>
            <input type="text" name="" id="user">
            <label for="pwd">密码:</label>
            <label for="VIP">VIP1:</label>
            <label for="VIP2">VIP2:</label>
        </form>
    </div>

</body>
</html>
posted on 2019-01-24 21:32  cherry小樱桃  阅读(169)  评论(0编辑  收藏  举报