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

最新推荐文章于 2024-05-28 12:36:33 发布
最新推荐文章于 2024-05-28 12:36:33 发布
阅读量546 收藏
点赞数 1
分类专栏： css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44100002/article/details/113742251
版权

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

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

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

阅读：属性选择器

Ｓòrry╮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解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的元素。 CSS3新增*=、^=、$=三种匹配方式[{属性 | 属性 {*= | ^= | $=} 值}]：1.*=表示模糊匹配，[href=163]可以匹配href=163.com、href=mail.163.com等元素；2.^=表示以指定字符开头，[href^=
CSS3选择器 | 每个前端开发者必须要掌握的技术
01-08
如果能够灵活运用属性选择器，目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。 E[att] {} : 选择具有att属性的E元素 E[att=val]{}: 选择具有att属性且属性值等于val的E元素 E[att~=val]{...
Css中 class^= 的含义 class~=，class|=，class$=, class*=
WangYan的博客
04-27 932
表示设置 class 属性值以 “test” 开头的所有元素的背景色，也就是说对 class=”test”；class=”test-001″ 的元素都是有效的。这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如：[class^=”test”] { background:#ffff00;
css属性选择器，[]，=， ~=， ^=， ~=， $=， |=等符号含义
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-30 9184
全栈工程师开发手册 （作者：栾鹏） css系列教程1—选择器全解css属性选择器包括[]是否有某属性，=属性是否等于，~=属性不等于，^=属性值以指定字符串开头，$=属性值以指定字符串结尾，*=属性值等于指定字符串，|=属性值以指定字符串为前缀。 代码如下：p[attribute1][attribute2]{ /* [] 属性选择器，表示具有某种属性的所有元素，多个参数表示同时具
css ^=选择器
笔记
12-19 1484
今天看了一下css的一个匹配规则^=,可以理解为sql里面like的左匹配， 如： span[color^="#ff"]{ background:#0000ff; } 即为选择span color属性以ff开头的元素添加背景色。 ps: 这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如： [class...
CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
qq_34729246的博客
10-28 394
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 951
具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id 属性选择器 ** [属性]{ 样式：值； }** 例如：把包含标题（title）的所有元素变为蓝色 2. 属性和值选择器 ** [属性=值]{ 样式：值； }** 例如：改变标题title='runoob’元素的边框样式 3. 属性和值的选择器-多值 [属性~=值]{ 样式：值； } 指定title属性的元素样式 使用(~)分隔属性和值 4. 表单样式 属性选择器样式无需使用class或id的形式
关于~= ^= $= *= |=各种选择器的区别
weixin_45394371的博客
02-28 249
上课的时候学到这几个选择器，感觉有些功能相似，没有区别。其实后面仔细研究了一下，还是有比较大的区别。下面我们分别来详细，举例说明。 1. x[attribute～=value] ～=value ，属性中必须有独立的单词是value才行，不论位置，必须要单独。 ex: p[class~=demo] 2. x[attribute|=value] |=value ，属性中必须是完整且唯一的单词，或者...
css3 - 属性选择器
ximingx
02-19 893
属性选择器的标志性符号是 []。 匹配含义： ^：开头 $：结尾 *：包含 格式： 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 203
它们前面带有插入符号的样式不适用.因此,在这种情况下,它可能是一种注释掉CSS样式的方法,而不必使用整个HTML注释.但这不是一种标准的方法.CSS中的插入符号确实有意义,即“开始于”Attribute selector.它允许您根据属性的值是否以给定字符串开头来定位CSS中的元素.E[foo] an E element with a "foo" attributeE[foo="bar"] ...
JQUERY的属性选择符和自定义选择符使用方法（二）
12-08
}) 属性选择也可以用组合方式： $(‘a[href^=http] [href*=wangorg]’).addClass(‘abold’) 自定义选择符是JQUERY添加的独有的完全不同的选择符，语法与CSS中的伪类选择符语法相同，即选择符以一个冒号（：）开头。...
Typesetting:少量Sass mixins和一组精心选择CSS规则，用于创建和完善精美的Web排版
05-16
它由一系列混合器组成，这些混合器使连字符，Opentype设置调整和其他高级排版功能易于添加到您的项目中。 要快速添加具有专业外观的排版，只需在HTML中链接default.css或将其包含在CSS中，或将_default.scss添加到...
github-highrez:注入和增强 Github 的个人 css 样式
06-26
#GitHub-HighRez v0.05 注入和增强 Github 的个人 css 样式 大屏用户制作 对于大屏用户 ＃＃特征 主界面 宽度缩放到屏幕的 75% 对于小于 1440 像素的...确保为主 css 选择以开头的 URL 。 ##外观和感觉 ＃＃谢谢
【css定位】
m0_61478092的博客
03-06 61
一、为什么需要定位 当标准流或浮动都无法快速实现，此时需要定位来实现 浮动可以让多个块级盒子一行没有缝隙排列显示经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或固定在屏幕某个位置 二、定位的组成 定位：将盒子定在某一个位置，所以定位也在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置 1.定位模式 定位模式决定元素的定位模式，它通过css的position属性来设置，其值可以分为四个 2.边偏移 边
CSS 概述
Dailyblue的专栏
03-29 1097
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 文件扩展名为 .css。
【CSS详解】一文掌握CSS基础用法
小新要变强的博客
09-27 4081
CSS入门教程，一文掌握CSS基础用法~
css选择器基本介绍
weixin_30278237的博客
06-09 119
根据获取页面中元素的不同，目前css选择器主要分为五类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。 1.基本选择器 基本选择器主要分为标签选择器，类选择器，ID选择器和通配选择器。 （1）标签选择器是css中使用率最高的一类选择器，易于管理，它直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中的显示样式。因此标签选择器可以快速，方便的控制页面标签的默认...
CSS3选择器详解
weixin_34241036的博客
02-07 108
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状 浏览器支持程度不够好，有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 应对的策略：渐进增强 ...
CSS实现一个雨滴滑落效果
最新发布
云加速
05-28 1636
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css3属性选择器开头
08-31
CSS3属性选择器有多种形式，可以根据属性的开头进行选择。 一种是"属性名^=值"，表示选择属性值以特定值开头的元素。例如： ``` [name^="prefix"] { /* 这里是样式 */ } ``` 上述代码会选择所有具有以"prefix"开头的属性值的元素。 另一种是"属性名|=值"，表示选择属性值以特定值开头，并且后面紧跟着连字符"-"的元素。例如： ``` [class|="example"] { /* 这里是样式 */ } ``` 上述代码会选择所有具有以"example"开头，并且后面紧跟着连字符"-"的属性值的元素。 还有一种是"属性名~="，表示选择属性值包含特定值，并且该值是以空格分隔的多个值中的一个。例如： ``` [data-options~="red"] { /* 这里是样式 */ } ``` 上述代码会选择所有具有包含"red"的属性值，并且该值是以空格分隔的多个值中的一个的元素。 这些是CSS3属性选择器中根据属性开头进行选择的几种方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值