标签（空格分隔）： 属性选择器
属性选择器：
除了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>
浙公网安备 33010602011771号