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

CSS属性选择器_伪类选择器的属性使用css04.css1/*属性选择器相关样式*/234[love]{5color:green;6}78[love="me"]{9color:re

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.net/167006.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • hey,你的CommonJS规范

    hey,你的CommonJS规范

    2021年6月13日
    108
  • 最强PostMan使用教程(1)

    最强PostMan使用教程(1)

    2021年10月12日
    53
  • 【分发糖果】【加密解密】[通俗易懂]

    【分发糖果】【加密解密】[通俗易懂]1.分发糖果原题地址:https://leetcode-cn.com/problems/candy/solution/fen-fa-tang-guo-by-leetcode/老师想给孩子们分发糖果,有N个孩子站成了一条直线,老师会根据每个孩子的表现,预先给他们评分。你需要按照以下要求,帮助老师给这些孩子分发糖果:每个孩子至少分配到1个糖果。相邻的孩子中,评分高的孩子必须获得更多的…

    2022年6月8日
    31
  • outputstreamwriter和filewriter_类文件解析

    outputstreamwriter和filewriter_类文件解析|–字符流(字符流=字节流+编码表。)|–字符输入流Reader——抽象类intread():一次读取一个字符intread(char[]chs):一次读取一…

    2022年9月11日
    0
  • vscode好用的插件「建议收藏」

    1.Chinese(Simplified)LanguagePackforVisualStudioCode(汉化vscode必备)2.BracketPairColorizer(给代码中的括号添加亮色便于区分这里截图有报错是特意便于演示写的多组括号)3.AutoCloseTag(自动补全标签必备)4.AutoRenameTag(修改标签名自动同步修改闭合标签的标签名必备)5.ClassautocompleteforHTML(自动补全cl

    2022年4月17日
    233
  • 一周信创舆情观察(12.7~12.13)

    一周信创舆情观察(12.7~12.13)一、一周舆情要点行业方面,2020年集成电路设计行业销售额预计为3819.4亿元,比2019年的3084.9亿元增长23.8%。日前,我国自主研发的一项物联网安全测试技术(TRAIS-PTEST)由国际标准化组织/国际电工委员会(ISO/IEC)发布成为国际标准。拉勾近日发布人才白皮书,至2020年底我国新基建相关核心技术人才缺口已达426万。国际方面,微软为ARM版本Win10推出64位模拟器。欧盟新法规定,超大型科技公司需监督互联网,否则罚款年营业额6%。近日,思科和英国云通信软件公司IMImo

    2022年5月10日
    45

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号