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