‘‘‘ E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[att=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 [att~=”name”] { color:#f00; } E[att^=val] 匹配属性值以指定值开头的每个元素 div[att^="test"]{background:#ffff00;} E[att$=val] 匹配属性值以指定值结尾的每个元素 div[att$="test"]{background:#ffff00;} E[att*=val] 匹配属性值中包含指定值的每个元素 div[att*="test"]{background:#ffff00;} ‘‘‘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css属性选择器"> <meta name="description" content="描述内容"> <meta http-equiv="Refresh" content="180;http://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>Title</title> <link rel="stylesheet" href="day105.css"> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <!--<script src="js.js"></script>--> </head> <body> <div>hello1</div> <div hello="one">hello2</div> <div hello="two">hello3</div> <div>hello4</div> <p hello="two">hello5</p> <p hello="three four">hello6</p> <!--属性值的空格代表这个属性有两个值，一个是three一个是four--> </body> </html>
[hello]{ color: red; } /*匹配所有具有hello属性的元素，不考虑它的值*/ [hello="two"]{ font-family: "Times New Roman"; font-size: 38px; background-color: yellow; } /*匹配所有hello属性等于"two"的元素*/ p[hello="two"]{ color: brown; } /*匹配所有p标签具有hello属性且等于"two"的元素*/ p[class~="three"]{ color: green; } /*匹配所有p标签有hello属性且具有多个空格分隔的值，其中一个值等于"three"的元素*/ /*p[hello~="four"]{*/ /* color: blue;*/ /*}*/ /*匹配所有p标签有hello属性且具有多个空格分隔的值，其中一个值等于"four"的元素*/ /*p[hello^="three"]{*/ /* color: pink;*/ /*}*/ /*匹配所有p标签有hello属性且以three开头的值的元素*/ /*p[hello$="four"]{*/ /* color: darkgoldenrod;*/ /*}*/ /*匹配所有p标签有hello属性且以four结尾的值的元素*/ /*p[hello*="three"]{*/ /* color: cornflowerblue;*/ /*}*/ /*匹配所有p标签有hello属性且包含three的值的元素*/ /*p[htllo*="four"]{*/ /* color: coral;*/ /*}*/ /*匹配所有p标签有hello属性且包含four的值的元素*/
原文：https://www.cnblogs.com/xuewei95/p/14945854.html