属性选择器

标签（空格分隔）：属性选择器

属性选择器：

除了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>