当前位置: 移动技术网 > IT编程>网页制作>CSS > CSS笔记——属性选择器

CSS笔记——属性选择器

2018年11月27日  | 移动技术网IT编程  | 我要评论
1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。[attr~=val]:该选择器仅选 ...

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 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: ^=, $=, *=

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网