微信扫一扫打赏支持

CSS属性选择器

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>

 

 
posted @ 2020-04-16 20:00  范仁义  阅读(232)  评论(0)  编辑  收藏  举报