【CSS】属性选择器指定开头字符^和|的区别

最新推荐文章于 2023-06-28 12:10:38 发布
原创 最新推荐文章于 2023-06-28 12:10:38 发布 · 639 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

本文详细介绍了CSS中属性选择器`[attribute^=value]`和`[attribute|=value]`的区别。`[attribute^=value]`用于选取属性值以指定值开头的元素，而`[attribute|=value]`则匹配属性值为指定值或以指定值加连字符开头的元素，主要用于语言属性的选择。注意`[attribute|=value]`后的值必须是完整单词或以连字符接续。

属性选择器指定开头字符^和|的区别

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。（css3出现）
试一试

[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元素。（css2出现）
注释：
该值必须是整个单词，比如 lang=“en”，或者后面跟着连字符，比如 lang=“en-us”。
试一试
⭐区别：[attribute|=value] 选择器限制value后不能有除-之外的其他字符，[attribute^=value] 无限制

阅读：属性选择器

全面了解css 属性选择器
12-13
在CSS中，属性选择器是一种强大的工具，允许我们根据元素的属性值来定位和样式化元素。下面我们将详细探讨标题和描述中提到的CSS属性选择器： 1. `[class~="flower"]`：这个选择器用于选取包含`flower`类的元素。...
使用CSS属性选择器来拼接HTML的DNA的方法
09-22
CSS属性选择器是CSS规范中一个强大的工具，它允许开发者通过HTML元素的属性及属性值来选择元素，从而对这些元素应用特定的样式规则。这种选择器极大地减少...掌握属性选择器，可以让你在CSS样式应用中更加强大和高效。
css ^=选择器
笔记
12-19 1681
今天看了一下css的一个匹配规则^=,可以理解为sql里面like的左匹配， 如： span[color^="#ff"]{ background:#0000ff; } 即为选择span color属性以ff开头的元素添加背景色。 ps: 这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如： [class...
css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-30 1万+
全栈工程师开发手册 （作者：栾鹏） css系列教程1—选择器全解css属性选择器包括[]是否有某属性，=属性是否等于，~=属性不等于，^=属性值以指定字符串开头，$=属性值以指定字符串结尾，*=属性值等于指定字符串，|=属性值以指定字符串为前缀。 代码如下：p[attribute1][attribute2]{ /* [] 属性选择器，表示具有某种属性的所有元素，多个参数表示同时具
Css中 class^= 的含义 class~=，class|=，class$=, class*=
WangYan的博客
04-27 1523
表示设置 class 属性值以 “test” 开头的所有元素的背景色，也就是说对 class=”test”；class=”test-001″ 的元素都是有效的。这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如：[class^=”test”] { background:#ffff00;
CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
qq_34729246的博客
10-28 484
1.attribute 属性中包含 value:　 [attribute~=value] 属性中包含独立的单词为 value，例如： [title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" /> [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如： [title*=flower] --> <img src="/i/eg_tuli
CSS属性选择器、及~=，|=，^=，$=，*=的区别
ly925816185的博客
09-18 1115
具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id 属性选择器 ** [属性]{ 样式：值； }** 例如：把包含标题（title）的所有元素变为蓝色 2. 属性和值选择器 ** [属性=值]{ 样式：值； }** 例如：改变标题title='runoob’元素的边框样式 3. 属性和值的选择器-多值 [属性~=值]{ 样式：值； } 指定title属性的元素样式 使用(~)分隔属性和值 4. 表单样式 属性选择器样式无需使用class或id的形式
详解CSS3中属性选择器新增加的特性
01-21
零、概览CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]1.[class=a]只能匹配class=a的元素2.[class~=a]则可以匹配class=a、class=a b的元素3.[lang|=en]则可以匹配lang=en、lang=en-us的元素。...
CSS属性选择器的四种格式
09-27
CSS属性选择器是CSS（层叠样式表）中一种强大的工具，它允许开发者根据HTML或XML元素的属性来选择和应用样式。通过属性选择器，我们可以精确地定位到具有特定属性或者满足特定条件的元素，从而实现更精细的样式控制...
关于~= ^= $= *= |=各种选择器的区别
weixin_45394371的博客
02-28 338
上课的时候学到这几个选择器，感觉有些功能相似，没有区别。其实后面仔细研究了一下，还是有比较大的区别。下面我们分别来详细，举例说明。 1. x[attribute～=value] ～=value ，属性中必须有独立的单词是value才行，不论位置，必须要单独。 ex: p[class~=demo] 2. x[attribute|=value] |=value ，属性中必须是完整且唯一的单词，或者...
css3 - 属性选择器
ximingx
02-19 1025
属性选择器的标志性符号是 []。 匹配含义： ^：开头 $：结尾 *：包含 格式： E[title] 选中页面的E元素，并且E存在 title 属性即可。 E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。 E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。 E[attr|=val] 表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。 E[title^="a
html内部样式表 .开头,html – CSS属性以插入符号开头
weixin_42140716的博客
06-03 282
它们前面带有插入符号的样式不适用.因此,在这种情况下,它可能是一种注释掉CSS样式的方法,而不必使用整个HTML注释.但这不是一种标准的方法.CSS中的插入符号确实有意义,即“开始于”Attribute selector.它允许您根据属性的值是否以给定字符串开头来定位CSS中的元素.E[foo] an E element with a "foo" attributeE[foo="bar"] ...
CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
sinat_37792529的博客
04-18 474
1.attribute 属性中包含 value:　 [attribute~=value] 属性中包含独立的单词为 value，例如： [title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" /> [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如： [title*=flower] --> <img src="/i/eg_tuli
【css定位】
m0_61478092的博客
03-06 163
一、为什么需要定位 当标准流或浮动都无法快速实现，此时需要定位来实现 浮动可以让多个块级盒子一行没有缝隙排列显示经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或固定在屏幕某个位置 二、定位的组成 定位：将盒子定在某一个位置，所以定位也在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置 1.定位模式 定位模式决定元素的定位模式，它通过css的position属性来设置，其值可以分为四个 2.边偏移 边
P5.CSS高级选择器3（属性选择器）
猪猪的博客
08-05 252
属性选择器 好处：将id属性和class属性选择器结合 格式有两种分别是： 标签元素名[属性名]{} 标签元素名[属性名=属性值] 注意：class*=""为*=并且带引号 属性选择器中常用的几个正则表达式通配符： =绝对等于唯一（适合id） *=包含（适合class） ^=以这个元素开头 $=以这个元素结尾 举例图： ...
css 选择符中的 >,+,~,=,^,$,*,|,:,空格 的意思
weixin_34075268的博客
06-29 714
一,作为元素选择符 * 表示通配选择符 * {} // 所有元素 二,作为关系选择符 空格 表示包含选择符 a div{} // 被a元素包含的div > 表示子元素选择符 a > div{} // a元素的div子元素,不包括孙辈 + 表示紧贴之后的元素 a + div{} // 紧贴在a元素之后的div ~ 表示...
CSS属性选择器*=，|=，^=,$=,*=的区别
weixin_38606332的博客
07-04 691
要求value是完整单词类型的比较符号：~=,|=拼接字符串类型的比较符号：*=,^=,$=1.attribute属性中包含value:　    [attribute~=value] 属性中包含独立的单词为value　　　　e.g:[title~=flower]  --&gt;  &lt;img src="/i/eg_tulip.jpg" title="tulip flower" /&gt;   ...
CSS基础笔记五。属性选择器（属性里面选择元素的值，有开头，结尾，包含，和固定值等选择）
qq_55006020的博客
06-28 3812
1，基础选择器（全局*， 元素， id#， 类.， 合并，）2，关系选择器（后代空格，子代大于，相邻兄弟加号，通用兄弟波浪号）3，伪类选择器（鼠标的四种状态爱恨类别（link，visted，hover，active），列表的多种选择（first-child，last-child，nth-child（n/odd/even）），容器内为空（empty）/唯一（only-child）/除了某个（not（元素）），元素为焦点的时候（focus），多选和复选增强（checked））
CSS用法(一)
-_^汪洸*的博客
04-07 505
CSS一、**CSS 的概述**二、**CSS 解决了什么问题?**三、**CSS 的基础语言以及页面引用**四、**Css文本及字体、链接、背景**1．**Css文本及字体设计**2．**背景设计**五、**颜色的表示方法**六、**Css列表及表格样式**1．**列表**2．**表格**七、**Css轮廓**八、**CSS 选择器的介绍以及使用**1．**标签选择器**2．**id 选择器**...
CSS属性选择器：拼接HTML的高效方式
在现代Web开发中，CSS属性选择器是一种强大的工具，它允许开发者以一种更加灵活、高效的方式来控制网页元素的样式。通常，属性选择器用于选择具有特定属性的HTML元素，而无需依赖类名或ID。以下是一些关键知识点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值