css属性选择器总结

属性选择器

属性选择器在 CSS2 中就已经被引入,并且在 CSS3 及更高版本中仍然被广泛使用,因为它们提供了一种灵活且强大的方式来选择具有特定属性的元素。

[attr]:

是一个属性选择器,用于选择具有指定属性的所有元素,而不论该属性的值是什么。这里的 attr 应该替换为你想要选择的属性名。
例如,如果你想要选择所有具有 data-custom 属性的元素,你可以这样写:

<style>[data-custom] {  /* 选择具有自定义属性的元素的CSS样式 */  color: purple;  }
</style>
<!--这条 CSS 规则会匹配所有带有 data-custom 属性的元素,不论该属性的值是什么 下边的元素都会被选中-->
<div data-custom="value1">This div has a data-custom attribute with value1.</div>  
<span data-custom="value2">This span has a data-custom attribute with value2.</span>  
<p data-custom>This paragraph has a data-custom attribute with no value.</p>

在上述 HTML 中,所有的 div、span 和 p 元素都会被选择并应用 color: purple; 样式,因为它们都带有 data-custom 属性,尽管它们的属性值可能不同或者没有值。

[attr=value]:

选择具有指定属性和值的元素。

<style>
div[id="box"]{background-color:#c00;}
</style><div id="box"></div>
[attr^=value]:选择属性值以特定字符串开头的元素。
<style>
div[class^="box-"]{background-color:#c00;}
</style><div class="box-abc">q</div><!--被选中-->
<div class="box-bcd">w</div><!--被选中-->
<div class="a box-x">e</div><!--不被选中-->

[attr$=value]:

选择属性值以特定字符串结尾的元素。

<style>
div[class$="-abc"]{background-color:#c00;}
</style><div class="b-ab">4</div><!--被选中-->
<div class="b_ab">5</div><!--被选中-->
<div class="ab box">6</div><!--不被选中-->

[attr*=value]:

选择属性值中包含特定字符串的元素,必须完全包含

<style>
div[class*="xy"]{background-color:#c0c;}
</style><div class="b-xy-one">4</div><!--被选中-->
<div class="xyz">5</div><!--被选中-->
<div class="youx">6</div><!--不被选中-->

[attr~=value]:

是一个属性选择器,用于选择具有指定属性的元素,且该属性的值必须是一个由空格分隔的列表,其中包含指定的词或短语。这里的 ~= 表示“包含词列表中的词”。
例如:假设你有一些带有 class 属性的 HTML 元素,这些 class 属性的值是由空格分隔的多个类名组成的列表。你可以使用 [attr~=value] 选择器来选择包含特定类名的元素。

<style>[class~=feature] {  /* 选择一个具有包含单词“feature”的类的元素 */  background-color: blue;  }
</style>
<div class="box feature">This is a featured box.</div>  
<div class="box">This is a regular box.</div>  
<div class="highlight feature">This is a highlighted feature box.</div>

在这个例子中,第一个和第三个 div 元素都会被选中,因为它们的 class 属性值中包含了词 feature。而第二个 div 元素则不会被选中,因为它的 class 属性值中没有包含 feature 这个词。
请注意,[attr~=value] 选择器对大小写敏感,除非在 HTML 文档中明确指定了属性值的大小写不敏感(这通常不是标准做法)。因此,确保在编写 CSS 选择器时使用与 HTML 属性值完全匹配的大小写是很重要的。
此外,虽然这个选择器在 CSS2 中就已经存在,但它在 CSS3 及更高版本中仍然被支持,并且经常与其他选择器和属性一起使用,以实现更复杂的样式和布局需求。

[attr|=value]:

是一个属性选择器,用于选择具有指定属性的元素,且该属性的值必须是以指定值开头的词或短语,或者是与指定值完全相等。这里的 |= 表示“以…开头或以连字符(-)分隔的精确值”
这个选择器通常用于选择具有特定语言或特定前缀的属性值的元素。例如,在 HTML 中,lang 属性经常用于指定元素内容的语言。如果你想要选择所有以 “en” 开头的 lang 属性的元素(如 lang=“en”, lang=“en-US”, lang=“en-GB” 等),你可以使用 [lang|=en] 选择器。

<style>[class|=en] {  /* 选择lang属性值以“en”开头的元素 */  background-color: green;  }
</style>
<div class="en box">This is a featured box.</div>  <!--被选中-->
<div class="en-US box">This is a regular box.</div>  <!--被选中-->
<div class="engliish feature">This is a highlighted feature box.</div>
<div class="en_US feature">This is a highlighted feature box.</div>

然而,需要注意的是,这个选择器的行为可能与你预期的不完全一样。按照规范,它实际上会匹配属性值等于 “en” 或者属性值以 “en-” 开头的元素。也就是说,它会匹配 lang=“en” 和 lang=“en-US”,但不会匹配 lang=“english” 或 lang=“en_US”(注意下划线而不是连字符)。
但在实际使用中,很多开发者可能会误以为它会匹配任何以指定值开头的属性值,而不仅仅是那些以连字符分隔的值。因此,在使用这个选择器时要特别小心,确保你的属性值格式与选择器的行为相匹配。

[attr^=“val”][attr$=“val”]

可以多个属性选择器叠加起来进行使用。

<style>
/* 以 "https" 开始,".org" 结尾的链接 */
a[href^="https"][href$=".org"] {color: green;}
</style><ul><li><a href="#internal">内部链接</a></li><li><a href="http://example.com">示例链接</a></li><li><a href="#InSensitive">非敏感内部链接</a></li><li><a href="http://example.org">示例 org 链接</a></li><li><a href="https://example.org">示例 https org 链接</a></li><!--被选中-->
</ul>

请注意,属性选择器是区分大小写的,除非在 HTML 文档中明确指定了属性名不区分大小写(这在实际开发中是非常罕见的)。因此,确保在编写 CSS 选择器时属性名的大小写与 HTML 中的实际使用保持一致是很重要的。

新增属性选择器,可以添加大小写规则

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i(或 I),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。

[attr operator value s]

在属性选择器的右方括号前添加一个用空格隔开的字母 s(或 S),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。

<style>
/* 根据文档语言不同,大小写敏感性不同 */
ol[type="a"] {
/*这里测试的最新火狐和 最新 chrome ,最新 edge都支持*/list-style-type: lower-alpha;background: red;
}
/*这里测试的最新火狐支持;最新 chrome ,最新 edge都不支持*/
ol[type="b" s] {list-style-type: lower-alpha;background: lime;
}
/*这里测试的最新火狐支持;最新 chrome ,最新 edge都不支持*/
ol[type="B" s] {list-style-type: upper-alpha;background: grey;
}
/*这里测试的最新火狐和 最新 chrome ,最新 edge都支持*/
ol[type="c" i] {list-style-type: upper-alpha;background: green;
}
</style><ol type="A"><li>非大小写敏感匹配呈现红色背景(类型选择器默认值)</li>
</ol><ol class="A"><li>大小写敏感所以不会被呈现红色背景</li>
</ol><ol type="b"><li>如果支持 `s` 修饰符(大小写敏感匹配),拥有亮绿色背景</li>
</ol>
<ol type="B"><li>如果支持 `s` 修饰符(大小写敏感匹配),拥有灰色背景</li>
</ol>
<ol type="C"><li>如果支持 `i` 修饰符(大小写不敏感匹配),拥有绿色背景</li>
</ol>

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

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

相关文章

发票OCR-国税可进行的发票查验种类-接口文档

发票查验内容包括发票种类名称、发票代码、发票号码、金额、销售方名称、购买方名称等信息。可以在国家税务总局全国增值税发票查验平台上进行查验&#xff0c;也可以进入发票所属省、直辖市税务局官方网站的“我要查询-发票查询”模块进行查验&#xff0c;企业也可以通过发…

二叉树遍历(牛客网)

描述 编一个程序&#xff0c;读入用户输入的一串先序遍历字符串&#xff0c;根据此字符串建立一个二叉树&#xff08;以指针方式存储&#xff09;。 例如如下的先序遍历字符串&#xff1a; ABC##DE#G##F### 其中“#”表示的是空格&#xff0c;空格字符代表空树。建立起此二叉树…

LeetCode_29_中等_两数相除

文章目录 1. 题目2. 思路及代码实现详解&#xff08;Python&#xff09;2.1 位运算与二分查找 1. 题目 给你两个整数&#xff0c;被除数 d i v i d e n d dividend dividend 和除数 d i v i s o r divisor divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算…

20240318uniapp怎么引用组件

在script中增加 import index from "/pages/index/index.vue" 把index直接整个作为一个组件引入 然后注册组件 在export default中增加 components: {index:index }, 注册了index组件&#xff0c;内容为import的index 然后就可以在template里使用 <index&…

机器人可反向驱动能力与力控架构

反向驱动性是电机传动系统的机械特性&#xff0c;它描述了运动是否可以轻松反转 。特别是&#xff0c;反向驱动能力取决于两个因素&#xff1a;传动运动效率和整体执行器机械阻抗。反向运动中传动装置的低运动效率意味着所施加的外力的大部分被运动反作用力抵消。然而&#xff…

Ubuntu 搭建gitlab服务器,及使用repo管理

一、GitLab安装与配置 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 1、安装Ubuntu系统&#xff08;这个教程很多&#xff0c;就不展开了&#xff09;。 2、安装gitlab社区版本&#xff0c;有需…

arm32机器的ubuntu1804的源突然不能update了

换成x86的官方源不行: Hit:1 http://archive.canonical.com/ubuntu bionic InRelease Get:2 http://archive.ubuntu.com/ubuntu bionic InRelease [242 kB] Get:3 http://archive.ubuntu.com/ubuntu bionic-updates InRelease [88.7 kB] Get:4 http://archive.ubuntu.com/ubu…

GAMES101 学习 2

Lecture 7&#xff1a;Shading 1(lllumination,Shading and Graphics Pipeline) Visibility / occlusion 解决可见性和遮挡的问题 可见性&#xff0c;Z-buffering Z-Buffer 深度缓存 Idea&#xff1a; Store current min. z-value for each sample (pixel)Needs an additi…

python学习3:unittest测试框架初学习

python内置测试框架 unittest&#xff08;xUnit家族成员 参考JUnit&#xff09;doctest&#xff1a; 假设被测试目标: def add(a,b):c a breturn c创建一个"test_同名"的文件夹 基本用法 1 创建测试用例 1 定义TestCase的子类 2 定义test_开头的方法 3 在方法…

vue-resource发送请求

导入依赖 终端输入 npm i vue-resource 使用插件 在main.js中应用插件 import Vue from "vue"; import App from "./App.vue" //引入插件 import vueResource from "vue-resource"; //使用插件 Vue.use(vueResource)new Vue({el:#app,render:h…

k8s工作节点主要模块

背景 k8s集群的worker节点作为主要的pod容器的运行节点&#xff0c;其上面有两个非常核心的模块组件&#xff0c;本文就来简单了解下 k8s工作节点主要模块 1.kublet组件&#xff0c;这个组件运行在工作节点上 1.1 它是一个负责这个节点所有pod运行的指挥官的角色&#xff0…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Line)

直线绘制组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口 Line(value?: {width?: string | number, height?: string | number}) 从API version 9开始&#xff0c;该接…

Twincat实现电机控制

不仅是控制系统的核心部分&#xff0c;而且能够将任何基于PC的系统转换为一个带有PLC、NC、CNC和机器人实时操作系统的实时控制系统。TwinCAT软件在工业自动化领域具有广泛的应用&#xff0c;特别是在机器人关节电机控制方面!!! 在机器人关节电机控制方面&#xff0c;TwinCAT通…

实验三 前端性能优化-CSS优化

仓库地址&#xff1a;bj-front: 前端性能与工程化 - Gitee.com 利用简写CSS属性和CSS浅选择器&#xff0c;贯彻DRY原则&#xff0c;来完成对页面的CSS的优化过程&#xff0c;通过避免不良实践&#xff0c; 以及使用高性能的CSS选择器、flexbox布局引擎和CSS过渡&#xff0c;提…

vue3 新特性defineOptions和defineModel

一、vue3.3 新特性defineOptions 在Vue3.3之前&#xff0c;组件的默认组件名为.vue单文件组件文件的名字&#xff0c;假如我们想修改组件名&#xff0c;则需要结合Options API进行修改。defineOptions的出现解决了这个问题。 这个宏可以用来直接在 <script setup> 中声明…

鸿蒙Harmony应用开发—ArkTS声明式开发(绘制组件:Shape)

绘制组件的父组件&#xff0c;父组件中会描述所有绘制组件均支持的通用属性。 1、绘制组件使用Shape作为父组件&#xff0c;实现类似SVG的效果。 2、绘制组件单独使用&#xff0c;用于在页面上绘制指定的图形。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有…

html5播放flv视频

参考&#xff1a;flv-h265 - npmHTML5 FLV Player. Latest version: 1.7.0, last published: 6 months ago. Start using flv-h265 in your project by running npm i flv-h265. There are no other projects in the npm registry using flv-h265.https://www.npmjs.com/packag…

高效备考2025年AMC8竞赛:吃透2000-2024年600道真题(免费送题)

我们继续来随机看五道AMC8的真题和解析&#xff0c;根据实践经验&#xff0c;对于想了解或者加AMC8美国数学竞赛的考生来说&#xff0c;吃透AMC8历年真题是备考更加科学、有效的方法之一。 即使不参加AMC8竞赛&#xff0c;吃透了历年真题600道和背后的知识体系&#xff0c;那么…

【linux】进程间通信1--管道

文章目录 进程间通信是什么&#xff1f;如何做&#xff1f; 管道匿名管道命名管道 进程间通信 是什么&#xff1f; 进程间通信&#xff08;Inter-Process Communication&#xff0c;IPC&#xff09;是指在操作系统中&#xff0c;不同的进程之间进行数据交换、信息传递和同步操…

人事管理系统|基于JSP+ Mysql+Java+ B/S结构的人事管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…