css中5种属性选择器

属性选择器

语法:

        [属性名]{} 选择含有指定属性的元素

        [属性名=属性值]{} 选择含有指定属性和属性值的元素

        [属性名^=属性值]{} 选择属性值以指定值开头的元素

        [属性名$=属性值]{} 选择属性值以指定值结尾的元素

        [属性名*=属性值]{} 选择属性值含有某值的元素

以下为演示代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>/* 需求一:有title属性的p标签,颜色变为红色 *//* p[title]{color: tomato;} *//* [title=abc]{font-size: 30px;} *//* [title^=ab]{color: blue;} *//* [title$=ab]{color: turquoise;} */[title*=c]{color: skyblue;}</style>
</head>
<body><h1 title="a" >满江红·写怀</h1><h3 title="ab">岳飞·宋</h3><p>····</p><p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p><p title="abcdab">驾长车,踏破贺兰山缺。</p><p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p><p>待从头、收拾旧山河,朝天阙。</p>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【HCSD大咖直播】亲授大厂面试秘诀【云驻共创】

同学们&#xff0c;毕业季是否找到了自己心仪的工作呢&#xff1f;是否了解大厂面试流程、要求以及技巧呢&#xff1f;华为云IoT高级工程师&#xff0c;传授大厂面试秘诀&#xff0c;教大家如何轻松get大厂offer&#xff01;提前为大厂面试做准备&#xff0c;赢在起跑线&#x…

uniapp和vue3+ts创建自定义下拉选择框组件

使用uniapp开发小程序的时候&#xff0c;使用了uview的ui组件&#xff0c;但是里面没有下拉选择组件&#xff0c;只有Picker 选择器&#xff0c;但是我们想要使用下拉选择的组件&#xff0c;所以需要自定义个一个下拉选择的自定义组件&#xff0c;我就只能自己动手创建这个自定…

43、vue导出pdf文件,并解决滚动条外内容无法获取的问题

使用插件html2canvas和jspdf插件 下载完两个插件后引入所需要的页面 import html2canvas from "html2canvas" import jsPDF from "jspdf"1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度&#xff0c;如&#xff1a; el.style.height el.scro…

【MySQL】CONCAT、CONCAT_WS、GROUP_CONCAT 函数用法

CONCAT 含义 将多个字符串连接成一个字符串 语法 CONCAT(str1, str2,...)数据模拟&#xff08;user_score&#xff09; idnamescore1小明652小红703小兰904(Null)1005小李(Null) SQL 代码 SELECT CONCAT(name, ,, score) AS score FROM user_score结果 score小明,65小红…

31、Flink的SQL Gateway介绍及示例

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

梳理一名Go后端程序员日常用的软件~

大家好&#xff0c;我是豆小匠。 这期分享下我日常工作用到的软件和工具&#xff01; 省流版图片↓↓↓ 工具分为四类&#xff1a;编码软件、笔记/文档软件、开发工具和日常软件等。 1. 编码软件 1.1. Goland 出自JetBrain家族&#xff0c;IDE的王者&#xff0c;作为我的…

hash模式和history模式

在Vue Router中&#xff0c;有两种路由模式可供选择&#xff1a;hash模式和history模式。它们各自有一些优点和缺点&#xff0c;下面是它们的简要介绍&#xff1a; hash模式的原理是通过hashchange事件&#xff0c;通过监听hash变化来驱动界面变化。它的url中有 # 号 1、监听…

Vuetify:定制化、响应式的 Vue UI 库 | 开源日报 No.83

vuetifyjs/vuetify Stars: 38.1k License: MIT Vuetify 是一个无需设计技能的 UI 库&#xff0c;具有精美手工制作的 Vue 组件。它具有以下核心优势和主要功能&#xff1a; 可定制性&#xff1a;使用 SASS/SCSS 进行广泛自定义&#xff0c;并提供默认配置和蓝图。响应式布局&…

C++标准模板(STL)- 类型支持 (类型修改,从给定类型移除 const 或/与 volatile 限定符,std::remove_cv)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdp --nowapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese

如何看待Unity新收费模式?

Unity新收费模式的变化主要在于将收费重心从功能分级收费转变为资源使用量收费&#xff0c;这个改变已经引起了一定的争议和反响。以下是我个人的看法&#xff1a; 优点&#xff1a; 更公平的收费方式&#xff1a;新的收费模式将更加公平&#xff0c;用户只需按照实际使用的数…

汇编-PUSHFD和POPFD标志寄存器值压栈和出栈

PUSHFD指令将32位EFLAGS寄存器内容压入堆栈&#xff0c; 而POPFD指令则将栈顶单元内容弹出到EFLAGS寄存器 格式&#xff1a;

接口自动化测试:pytest基础讲解

为什么要做接⼝测试&#xff1f; 只靠前端测试很难确保很⾼的覆盖率。接⼝测试&#xff0c;可以模拟出各种类型的⼊参&#xff0c;包括⼀些在前端模拟不出来的⼊参&#xff0c;还能根据接⼝⽂档的定义&#xff0c;设计出相对完善的⼊参值&#xff0c;在接⼝层保证质量&#xf…

常见树种(贵州省):006栎类

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、麻栎 …

基础课10——自然语言生成

自然语言生成是让计算机自动或半自动地生成自然语言的文本。这个领域涉及到自然语言处理、语言学、计算机科学等多个领域的知识。 1.简介 自然语言生成系统可以分为基于规则的方法和基于统计的方法两大类。基于规则的方法主要依靠专家知识库和语言学规则来生成文本&#xff0…

博客摘录「 【Linux】线程池」2023年10月14日

一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而线程池维护着多个线程&#xff0c;等待着 监督管理者分配可并发执行的任务。这避免了在处理短时间任务时创建与销毁线程的代价。线程池不仅能够保证内核的充分利 用&#xff0c;还能防止…

Vue公共loading升级版(处理并发异步差时响应)

公共loading是项目系统中很常见的场景&#xff0c;处理方式也不外乎三个步骤&#xff1a; 通过全局状态管理定义状态值&#xff08;vuex、pinia等&#xff09;。 在程序主入口监听状态值变化&#xff0c;从而展示/隐藏laoding动画。 在请求和相应拦截器中变更状态值。 第一二…

svn文件不显示红色感叹号

如下图所示&#xff0c;受svn版本控制的文件不显示下图中红色感叹号和绿色对号时&#xff0c; 可以试着如下操作 空白处单击右键&#xff0c;具体操作如下图

Rust可空类型Option

文章目录 Option基础模式匹配unwrap Rust基础教程&#xff1a;初步⚙所有权⚙结构体和枚举类⚙函数进阶⚙泛型和特征⚙并发和线程通信⚙cargo包管理 Rust进阶教程&#xff1a;用宏实现参数可变的函数⚙类函数宏 Option基础 在一些编程语言中&#xff0c;允许存在空值&#xf…

docker的基本使用以及使用Docker 运行D435i

1.一些基本的指令 1.1 容器 要查看正在运行的容器&#xff1a; sudo docker ps 查看所有的容器&#xff08;包括停止状态的容器&#xff09; sudo docker ps -a 重新命名容器 sudo docker rename <old_name> <new_name> <old_name> 替换为你的容器名称…