<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button { color: blue; } button[disabled] { color: red; } input[type="search"] { color: red; } input[class^="icon"] { color: blue; } input[class$="icon1"] { color: chocolate; } input[class*="abc"] { color: cyan; } </style> </head> <body> <!-- 属性选择器 --> <!-- E[att] 具有att属性的E元素 E[att^="val"] 具有att属性且值以val开头的E元素 E[att$="val"] 具有att属性且值以val结尾的E元素 E[att*="val"] 具有att属性且值有val的E元素 --> <div> <!-- button[disabled] { color: red; } --> <button>aaa</button> <button>aaa</button> <button disabled>bbb</button> <button disabled>bbb</button> </div> <div> <!-- input[type="search"] { color: red; } --> <input type="text" value="文本框"> <input type="text" value="文本框"> <input type="search" value="搜索框"> <input type="search" value="搜索框"> </div> <div> <!-- input[class^="icon"] { color: blue; } --> <input class="icon1aa" value="搜索框"> <input class="icon1aa" value="搜索框"> </div> <div> <!-- input[class$="icon1"] { color: chocolate; } --> <input class="aaicon1" value="搜索框"> <input class="aaicon1" value="搜索框"> </div> <div> <!-- input[class*="abc"] { color: cyan; } --> <input class="testabcdefg" value="搜索框"> <input class="test1" value="搜索框"> </div> </body> </html>