按照标签属性进行控制
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>