CSS属性选择器
一、总结
一句话总结：
CSS属性选择器是中括号，比如[love="you"] {color: red;}，也比如vue中解决插值表达式的[v-cloak]
[love] { color: green; } [love="me"] { color: red; }
二、CSS属性选择器
转自或参考：CSS属性选择器
https://www.cnblogs.com/cherry2020/p/12671296.html
1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9 color: red; 10 }
1 <!DOCTYPE html> 2 <html lang="ch-zn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css04.css"> 7 <style> 8 div>[class^=first] { 9 color:yellow; 10 } 11 div>[class$=CD] { 12 color: aqua; 13 } 14 15 div>[class*=CA] { 16 color: chocolate; 17 } 18 19 div>[class~=c2] { 20 color: darkmagenta; 21 } 22 </style> 23 </head> 24 <body> 25 <p>我是一个p标签</p> 26 <p love="you" >我也是一个p标签 我有一个自定义属性love 其值为you</p> 27 <p love="and" >我也是一个p标签 我有一个自定义属性love 其值为and</p> 28 <p love="me">我也是一个p标签 我有一个自定义属性love 其值为me</p> 29 <div> 30 <p id="d1" class="first ABC">属性选择器 1 补充示例</p> 31 <p id="d2" class="first ABCE">属性选择器 2 补充示例</p> 32 <p id="d3" class="ADCD">属性选择器 3 补充示例</p> 33 <p id="d4" class="BCAD">属性选择器 4 补充示例</p> 34 <p id="d5" class="tBCADT">属性选择器 5 补充示例</p> 35 <p id="d6" class="c1 c2 c3 c4">属性选择器 6 补充示例</p> 36 <p id="d7" class="c1c2c3">属性选择器 7 补充示例</p> 37 </div> 38 </body> 39 </html>