属性选择器与类选择器_input属性选择器

全栈程序员站长

发布于 2022-09-20 10:19:46

1.7K0

发布于 2022-09-20 10:19:46

属性选择器

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/168418.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法