CSS笔记——属性选择器

时间:2023-03-08 16:03:49

1.存在和值(Presence and value)属性选择器
这些属性选择器尝试匹配精确的属性值:
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

2.子串值(Substring value)属性选择器
这种情况的属性选择器也被称为“伪正则选择器”,因为它们提供类似 regular expression 的灵活匹配方式(但请注意,这些选择器并不是真正的正则表达式):
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(注意,这里的 “-” 不是一个错误,这是用来处理语言编码的)。
[attr^=val] : 选择attr属性的值以 val 开头(包括 val)的元素。
[attr$=val] : 选择attr属性的值以 val 结尾(包括 val)的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已,例如,”cat“ 是 字符串 ”caterpillar“ 的子字符串)。

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别
"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: ^=, $=, *=