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


相关推荐

  • 算法刷题LeetCode中文版_leetcode100题

    算法刷题LeetCode中文版_leetcode100题算法题打卡:仅仅反转字母。没有特别幸运,那么请先特别努力,别因为懒惰而失败,还矫情地将原因归于自己倒霉。所以说,树倒了,没有一片雪花是无辜的

    2022年8月31日
    4
  • layui 如何去dom_layui 弹出层

    layui 如何去dom_layui 弹出层这是一个可以重要也可以不重要的方法,重要的是,它的权利真的很大,尤其是在模块化加载layer时,你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块,甚至还可以决定整个弹层的默认参数。而说它不重要,是因为多数情况下,你会发现,你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。如果您是采用seajs或者requirejs加载layer,你需要执行该方法来完成初始化的配置。比如:lay…

    2022年6月11日
    37
  • c#线程的使用_线程定义

    c#线程的使用_线程定义Unity3d之截图方法分类: Unity3D2013-11-2817:13 1014人阅读 评论(2) 收藏 举报AnYuanLzhunityunity3d截屏下面是我总结的、在u3d中的,三种截屏方法:1、使用Application类下的CaptureScreenshot方法。[csharp] viewplaincopyvoid CaptureScreen()   {      App

    2022年10月16日
    4
  • vue生成二维码插件_chrome二维码插件

    vue生成二维码插件_chrome二维码插件原文:https://www.jianshu.com/p/496fd1cbee8dnpminstallqrcodejs2–save页面中引入dom结构JS方法编写exportdefault{data(){link:’https://baidu.com’},methods:{//…

    2022年10月3日
    4
  • CentOS7安装MySQL8.0图文教程

    CentOS7安装MySQL8.0图文教程1.下载MySQL所需要的安装包      网址:https://dev.mysql.com/downloads/mysql/2.SelectOperatingSystem:选择RedHat,CentOS是基于红帽的,SelectOSVersion:选择linux73.选择RPMBundle点击Download4.点击 Noth…

    2022年6月14日
    42
  • PE结构

    PE结构PE文件是Windows操作系统下使用的可执行文件格式。它是微软在UNIX平台的COFF(通用对象文件格式)基础上制作而成。最初设计用来提高程序在不同操作系统上的移植性,但实际上这种文件格式

    2021年12月13日
    54

发表回复

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

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