css的属性选择器

Sep 8, 2019

css 的属性选择器,主要有 7 种。

1. element[attr]

匹配所有含有属性 attr 的元素。

2. element[attr=value]

匹配所有含有属性 attr 且值为 value 的元素。

3. element[attr~=value]

匹配含有属性 attr 且值包含 value 的元素
值以空格作为分隔,需要完全匹配,如 div[class~=one]可匹配

1
<div class="two one"></div>

,不可匹配

1
<div class="onetwo">

4. element[attr|=value]

匹配含有属性 attr 且值为 value 或值为 value-为前缀。

以 div[class~=one]举例,
若属性含有多个值,则不能匹配例如

1
<div class="value 123123">

,可匹配例如

1
<div class="value-test 123123">

5. element[attr^=value]

匹配含有属性 attr 且值以 value 开头的元素。
若有多个元素,则第一个元素需要以 value 开头。

6. element[attr$=value]

匹配含有属性 attr 且值以 value 结尾的元素。
若有多个元素,则最后一个元素需要以 value 开头。

7. element[attr*=value]

匹配含有属性 attr 且值包含 value 的元素。
与第三种选择器不同的地方在于,在含有多个值的情况下,不需要严格匹配,即可匹配

1
<div class="two one">

,也可匹配

1
<div class="onetwo">

小结

由于 css 中。,属性可以有多个值,且以空格分开,因此属性选择器中有了上述第三种和第七种之分。

实际上只需要把除第三种以外的所有属性选择器,将属性的值或值列表当作一个整体,就可以简单地区分出来了。