[data-value] {
/* 包含某属性 */
}
[data-value="foo"] {
/* 属性值都等于"foo" */
}
[data-value*="foo"] {
/* 属性值中含有"foo" */
}
[data-value~="foo"] {
/* 以空格作为分隔的"foo" */
}
[data-value^="foo"] {
/* 以"foo"开头 */
}
[data-value|="foo"] {
/* "foo" 或 "foo-" */
/* 如|="zh" 匹配zh-CN, 匹配zh, 但不会匹配a-zh(即, 匹配zh 或zh- 开头) */
}
[data-value$="foo"] {
/* 以"foo"结尾 */
}
属性选择器加上i
, 可以不区分大小写
[attribute="value" i] {
/* Styles here will apply to elements with:
attribute="value"
attribute="VaLuE"
attribute="VALUE"
...etc
*/
}
https://css-tricks.com/almanac/selectors/a/attribute/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors