Question

是否可以使用通配符仅使用CSS按名称选择数据属性？

[data-widget-type="*.color"] {
    color: orange
}

<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

http://jsfiddle.net/

Answer 1

是的，这是可能的，只是不完全按照你的方式完成它。您需要在字符串声明之外移动分隔符（在您的情况下，“通配符”星号）。对于您尝试选择的内容，还有一个更好的分隔符。这是正确的attr selector：

li[data-widget-type$="color"] {
    color: orange;
}

<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

这将选择li个data-widget-type个元素，其color值以alert('test');结尾，并将其颜色更改为橙色。

这是一个JSFiddle demo，可以自己玩。

Answer 2

[data-widget-type*="color"] {
  color: red;
}

<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

有关属性选择器的更多信息 - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 3

    li[data-widget-type$=".color"] { 
        color: orange;
    }

<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

您也可以使用css选择器。

对于特定属性，您可以使用[]，如果您要比较css中的某些内容并希望在开始时搜索^=，或者如果您想在最后$=找到它可以用这个。

此外，如果您不知道比较单词中单词的位置，那么您也可以使用通配符*。所以在我们的例子中它是li[data-widget-type*=".col"]

作为一个建议，我喜欢像这样构建我的css文件。我总是有一个颜色的CSS课程。

li[class*="red"] { 
    color: red;
}

因此，当我不想使用单any-red课程时，我也可以从new-red，red这样的任何其他课程中访问它。

另外请注意，您也可以使用li[data-widget-type|="red"]来表示以红色开头的元素。这是CSS2的一个古老但好的举动，一些浏览器可能拒绝它，所以要小心。

所以这里是jsFiddle，这是片段。

＆＃13;

li[data-widget-type$=".color"] { 
    color: orange;
}

＆＃13;

<ul>
    <li>asdasd</li>
    <li data-widget-type="red.color">asdasd</li>
    <li data-widget-type="none.color">asdasd</li>
</ul>

＆＃13;

在CSS中使用通配符属性选择器

3 个答案: