当前位置:首页 > 前端技术 > css属性标签选择器

css属性标签选择器

2022年08月04日 19:05:05前端技术2

今天在项目中发现组件内包含了一个class选择器

css属性标签选择器 _ JavaClub全栈架构师技术笔记

 查询后发现这种属于属性标签选择器,相对于传统的元素选择器等,可以实现更多的类或标签的选择,甚至直接查询属性,使用起来更加灵活。

语法

[attr]
表示带有以 attr 命名的属性的元素。

[attr=value]
表示带有以 attr 命名的属性,且属性值为 value 的元素。

[attr~=value]
表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。

[attr|=value]
表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
[attr^=value]

表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
[attr$=value]

表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
[attr*=value]

表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。
[attr operator value i]

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

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

查询属性

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

查询链接

/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

多语言(适合使用i18n的项目)

/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
div[lang] {
  font-weight: bold;
}

/* 将所有语言为美国英语的 <div> 元素的文本颜色设为蓝色 */
div[lang~="en-us"] {
  color: blue;
}


/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
   无论是简体中文(zh-CN)还是繁体中文(zh-TW) */
div[lang|="zh"] {
  color: red;
}

 有序列表

/* 列表类型不需要大小写敏感标志,这是由于 HTML 处理 type 属性的一个怪癖。 */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

作者:1024_Byte
来源链接:https://blog.csdn.net/DDD4V/article/details/120129477

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17485.html

标签: css
分享给朋友:

“css属性标签选择器” 的相关文章

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。