属性选择器
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;
}
时间： 2024-10-24 16:29:25