标签：
属性选择器
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css"> 7 </head> 8 <body> 9 <h1 class="hoopla">Hello</h1> 10 <h1 class="hoopla fancy">Hi 11 <h1 class="severe">serenity</h1> 12 <h1 class="fancy">Fooling</h1> 13 <span class="1cloud sun">colud</span> 14 <span class="1rain sun">rain</span> 15 <span class="sun">sun</span> 16 </html>
1 h1[class] {/*根据元素属性来选择元素*/ 2 color: silver; 3 } 4 5 h1[class="hoopla"]{/*根据具体属性值选择元素， 6 这种格式要求必须与属性值完全匹配*/ 7 text-decoration: underline; 8 } 9 10 h1[class~="fancy"] {/*根据部分属性值选择元素，～ 声明为部分选择*/ 11 display: block; 12 margin-right: 1000px; 13 background: #ff0000; 14 }
15 /*子串匹配选择器*/ 16 span[class*="n"]{/*选择class属性值中包含子串"n"的所有元素*/ 17 background: #f60; 18 } 19 span[class^="1"]{/*选择class属性值以"1"开头的所有元素*/ 20 background: #ccc; 21 } 22 span[class$="sun"]{/*选择class属性值以"sun"结尾的所有元素*/ 23 text-decoration: underline; 24 }
简单属性选择：选择元素某个属性，不论属性值是什么。
这里选择h1元素 → Class属性 的元素,设置前景色为银色
h1[class] {/*根据元素属性来选择元素*/
color : silver;
}
具体属性值选择：除了选择元素某个属性，还可以进一步缩小选择范围，只选择特定属性值的元素
这里选择h1元素 → Class属性 → 具体值“hoopla” 的元素，设置文本样式为有下划线
h1[class=”hoopla”] {/*根据具体属性值选择元素，这种格式要求必须与属性值完全匹配*/
text-decoration : underline;
}
部分属性值选择：可以根据属性值，其中任意一个词进行选择
这里选择h1元素 → Class属性 → 部分值“fancy” 的元素，有两个h1元素 含有“fancy”，这两个元素样式都会被设置
h1[class~="fancy"] {/*根据部分属性值选择元素，～声明为部分选择*/
margin-right: 1000px;
background: #ff0000;
}
标签：
原文地址：http://www.cnblogs.com/feng-codeKing/p/5671903.html
