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

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选择器 ：

 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 ，并改变它们的颜色为橙色。

这是一个JSFiddle演示 ，您可以自己试用 。

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/zh-CN/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;
}

因此，当我不想使用单个red类时，也可以从任何其他类（例如any-red ， new-red 。

同样不要忘记，对于以红色开头的元素，也可以使用li[data-widget-type|="red"] 。 这是CSS2上的一个古老但不错的举动，某些浏览器可能会拒绝它，因此请当心。

所以这是jsFiddle ，这是代码段。

 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>