css属性标签选择器

Posted 萌萌的DDD

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css属性标签选择器相关的知识,希望对你有一定的参考价值。

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

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

语法

[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;
}

以上是关于css属性标签选择器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段6——CSS选择器

css复合选择器都有哪些

CSS-选择器

CSS学习笔记

Css-1