CSS属性选择器_伪类选择器的属性使用

全栈程序员站长

发布于 2022-09-20 18:44:05

1.6K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

css04.css

 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>

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

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

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

java