按照标签属性进行控制
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*匹配所有具有type属性的input标签*/
/*标签可以不写,表示匹配所有具有type属性的*/
input[type]{
color: red;
}
/*匹配所有type属性等于“text”的input标签*/
input[type="text"]{
color: red;
}
/*匹配属性值以指定值开头的元素*/
[class^="s"]{
color: red;
}
/*匹配属性值以指定值结尾的元素*/
[class$="e"]{
color: blue;
}
</style>
</head>
<body>
<input type="aastext">
<input type="password">
<div class="abcde">item1</div>
<div class="sfdsg">item2</div>
</body>
</html>