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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要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>