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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java面经整理

    腾讯1.java基础 8种基本数据类型,int几个字节 类型 存储需求 取值范围 byte 1B -128~127 short 2B -32768~32767 int 4B -20亿~20亿 long 8B float 4B 小数点后6~7位 dou…

    2022年4月6日
    29
  • 第七章:同步类容器,vector 线程安全与hashmap线程不安全等的举例

    第七章:同步类容器,vector 线程安全与hashmap线程不安全等的举例第七章:同步类容器,vector 线程安全与hashmap线程不安全等的举例

    2022年4月23日
    47
  • 网页500错误怎么解决_系统报500错误解决方法

    网页500错误怎么解决_系统报500错误解决方法1.问题描述2.问题解决3.HTTP请求代码1.问题描述1.使用http方式请求对方服务器,返回JSON格式数据2.由于是测试环境,网段不是同一个,对方服务器网段做了代理,我们能ping通,也能telnet3.使用浏览器访问能正常返回JSON格式数据4.用代码解析http请求一直报500错误,对方觉得是我们代码问题,但是我们用代码解析公网上的一些请求是正常的;而且…

    2022年8月12日
    5
  • 学习笔记-const与readonly的异同

    学习笔记-const与readonly的异同(1)const定义时即初始化,运行期间无法再初始化;readonly除了在定义时可以初始化外,还能再运行期间的构造函数中初始化,实例只读变量只能在实例构造函数中初始化,静态只读变量只能在静态构造函数

    2022年7月2日
    29
  • c语言韦达定理求方程解,高一上韦达定理,高次,多元方程解法.doc

    c语言韦达定理求方程解,高一上韦达定理,高次,多元方程解法.doc实用文档PAGE文案大全一元二次方程根与系数关系(韦达定理),多元方程解法,高次方程解法一元二次方程根与系数的关系现行初中数学教材主要要求学生掌握一元二次方程的概念、解法及应用,而一元二次方程的根的判断式及根与系数的关系,在高中教材中的二次函数、不等式及解析几何等章节有着许多应用.本节将对一元二次方程根的判别式、根与系数的关系进行阐述.一)、一元二次方程的根的判断式一元二次方程,用配方法将其变形为…

    2022年10月26日
    0
  • Pyhton 单行、多行注释方法

    Pyhton 单行、多行注释方法

    2021年10月28日
    36

发表回复

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

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