Что означает img[class*="align"] в CSS?
Я видел это во многих таблицах стилей, но я не уверен, почему он использовал и что он делает. Любая идея?
Что означает img [class * = "align" ] в CSS?
Ответ 1
Это селектор атрибутов, который соответствует любому тегу класса тега img, включая "align". Например, он будет соответствовать любому из следующих элементов:
<img class="dummy align test" />
<img class="test align-1" />
<img class="hello-align" />
<img class="abaligncd" />
<img class="align" />
Из документации (см. выше):
E [foo * = "bar" ] - элемент E, значение атрибута "foo" содержит подстроку "bar"
Это используется в популярных CSS-фреймах для создания нескольких похожих классов без необходимости добавлять к ним новый идентичный класс. Например, если у нас была следующая разметка:
<p class="central para-red">Hello, world!</p>
<p class="para-green bold">Hello, world!</p>
<p class="para-blue">Hello, world!</p>
<p>Hello, world!</p>
Мы могли бы применять стиль для всех элементов p, класс которых содержит "пара", без необходимости вручную вводить все варианты, просто используя:
p[class*="para-"] { ... }
Вот пример JSFiddle этого использования.
Ответ 2
Он будет соответствовать всем элементам img, у которых есть класс, который содержит align.
Спецификация имеет более подробную информацию об этом: