选择器-属性选择器
属性选择器
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
