Ответ 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 этого использования.