基于通配符的属性名称的 CSS 选择器

问题描述

我最近对 ​​CSS 选择器做了一些研究，但遇到了一个关于新的data-*"属性的问题.

我知道为了选择具有数据属性的元素，有几种方法:

[data-something='value']{...}//data-something has value = 'value'[data-something^='value']{...}//data-something 具有以 'value' 开头的值[data-something*='value']{...}//data-something 有值，其中包含 'value SOMEWHERE

这些还有其他变体，但我的问题与 CSS 选择器有关，这些选择器可以定位仅具有数据"属性的元素.更具体地说，是否有一个 CSS 选择器可以定位具有任何数据"属性的元素?

虽然不正确，但我在想:

[数据]{...}

我一直在通过 Google 进行搜索，但还没有找到任何关于该属性的通用选择器的信息.

解决方案

不，CSS 选择器中的属性名称没有通配符.所有属性选择器都包含属性的特定名称.>

I've recently been doing a little studying on CSS selectors and have run into a question regarding the new "data-*" attributes.

I understand that in order to select elements with a data attribute there are a few ways of going about it:

[data-something='value']{...}    // data-something has value = 'value'
[data-something^='value']{...}   // data-something has value that STARTS with 'value'
[data-something*='value']{...}   // data-something has value with 'value SOMEWHERE in it

There are other variations of these, but my question pertains to CSS selectors that can target elements that simply HAVE a "data" attribute. More specifically, is there a CSS selector that can target elements that have ANY "data" attribute at all?

While incorrect, I'm thinking of something like:

[data]{...}

I've been searching through Google but haven't found anything regarding a generic selector for the attribute yet.

解决方案

No, there is no wildcarding for attribute names in CSS selectors. All attribute selectors contain a specific name of an attribute.

这篇关于基于通配符的属性名称的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！