属性选择器
1E[att$="val"]{ sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 li[class$="a"]{color:#f00;}
8 </style>
9 </head>
10 <body>
11 <!--最后一个字母为a-->
12 <ul>
13 <li class="abc">列表项目</li>
14 <li class="acb">列表项目</li>
15 <li class="bac">列表项目</li>
16 <li class="bca">列表项目</li>
17 <li class="cab">列表项目</li>
18 <li class="cba">列表项目</li>
19 </ul>
20 </body>
21 </html>
2E[att="val"]{ sRules } 选择具有att属性且属性值等于val的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 p[class="a"]{
12 color: red;
13 }
14 </style>
15 </head>
16 <body>
17 <!--2：E[att="val"]:选择具有att属性值等于val的E元素-->
18 <div>
19 <p class="a">选择具有att属性值等于val的E元素</p>
20 <p>选择具有att属性值等于val的E元素</p>
21 <!--<span>DWER</span> 写入不会影响-->
22 <p class="b">选择具有att属性值等于val的E元素</p>
23 <p>选择具有att属性值等于val的E元素</p>
24 <p class="a">选择具有att属性值等于val的E元素</p>
25 </div>
26 <p class="a">选择具有att属性值等于val的E元素</p>
27 </body>
28 </html>
3E[att]{ sRules } 选择具有att属性的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 p[class]{
12 color: red;
13 }
14 </style>
15 </head>
16 <body>
17 <!--《字符串匹配》属性选择器-->
18 <!--1：E[att]:选择具有att属性的E元素-->
19 <div>
20 <p class="a">选择具有att属性的E元素</p>
21 <p>选择具有att属性的E元素</p>
22 <p class="b">选择具有att属性的E元素</p>
23 <p>选择具有att属性的E元素</p>
24 </div>
25 <p class="c">选择具有att属性的E元素</p>
26
27
28 </body>
29 </html>
4E[att^="val"]{ sRules } 选择具有att属性且属性值为以val开头的字符串的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 li[class^="a"]{color:#f00;}
8 </style>
9 </head>
10 <body>
11 <!--第一个字母为a的值-->
12 <ul>
13 <li class="abc">列表项目</li>
14 <li class="acb">列表项目</li>
15 <li class="bac">列表项目</li>
16 <li class="bca">列表项目</li>
17 <li class="cab">列表项目</li>
18 <li class="cba">列表项目</li>
19 </ul>
20 </body>
21 </html>
5E[att~="val"]{ sRules } 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 li[class~="external"]{
12 color:#f00;}
13 </style>
14 </head>
15 <body>
16 <!--E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。-->
17 <ul>
18 <li class="external txt">外部链接</li>
19 <li class="txt">内部链接</li>
20 <li class="external txt">外部链接</li>
21 <li class="txt">内部链接</li>
22 </ul>
23 </body>
24 </html>
6E[att*="val"]{ sRules } 选择具有att属性且属性值为包含val的字符串的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 li[class*="ab"]{color:#f00;}
8 </style>
9 </head>
10 <body>
11 <!--E[att*="val"]，选择具有att属性且属性值为包含val的字符串的E元素。-->
12 <ul>
13 <li class="abc">列表项目</li>
14 <li class="acb">列表项目</li>
15 <li class="bac">列表项目</li>
16 <li class="bca">列表项目</li>
17 <li class="cab">列表项目</li>
18 <li class="cba">列表项目</li>
19 </ul>
20 </body>
21 </html>
7E[att|="val"]{ sRules } 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 li[class|="test3"]{color:#f00;}
8 </style>
9 </head>
10 <body>
11 <!--E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。-->
12 <ul>
13 <li class="test1-abc">列表项目</li>
14 <li class="test2-abc">列表项目</li>
15 <li class="test3-abc">列表项目</li>
16 <li class="test4-abc">列表项目</li>
17 <li class="test5-abc">列表项目</li>
18 <li class="test6-abc">列表项目</li>
19 </ul>
20 </body>
21 </html>
属性选择器的权值是10
时间： 2024-10-13 21:54:02