Использование селектора атрибутов подстановки в 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 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, и изменить их цвет на оранжевый.

Это 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.

Для конкретного atribute вы можете использовать [] и если вы сравниваете что-то в 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 и вот фрагмент.

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>

Answer 4

Для полноты можно комбинировать различные селекторы атрибутов.Например следующие матчи is * color:

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

<ul> 
 
    <li data-widget-type="is red color">asdasd</li> 
 
    <li data-widget-type="is blue color">asdasd</li> 
 
    <li data-widget-type="has no color">asdasd</li> 
 
</ul>