Нечетный синтаксис CSS. [class ^ = 'icon-'], [class * = 'icon-']

Сейчас я просматриваю чей-то код CSS и обнаружил то, что я раньше не видел, и не могу найти что-либо в школах W3C об этих типах селекторов. Google также ничего не возвращает, если я набираю "class ^ =" 

  [class^='icon-'], [class*=' icon-'] { display:inline-block; background:url(../images/sprite.png) no-repeat 0 0; border:none; text-align:center; vertical-align:middle; *display:inline; *zoom:1; }

Понравилось бы, если бы кто-то мог пролить свет на это, пожалуйста?

Ответы

Ответ 1

[key ^ = 'starts_with'] Будет искать элементы, у которых есть атрибут 'key', значение которого начинается с 'starts_with'. Подробнее см. Селектор CSS3.

Пример:

<div key='starts_with_bacon'>this will be selected with [key^='starts_with']</div>

Ответ 2

Здесь подробно рассматривается здесь:

http://reference.sitepoint.com/css/css3attributeselectors

Краткое резюме:

[class^='icon-'] - classes starting with 'icon-' (eg. class='icon-blah blah')
[class$='-icon'] - classes ending with '-icon'   (eg. class='blah blah-icon')
[class*='icon']  - classes containing 'icon'     (eg. class='blah xxx-icon-blah')

Стоит отметить, что это полный шаблон соответствия строк, а не шаблон с частичным совпадением. Например, класс:

<div class='mystyle-type'/>

Будет соответствовать селектору [class ^ = 'mystyle], но класс:

<div class='active mystyle-type'/>

Будет соответствовать не, потому что строка "active mystyle-type" не начинается с "mystyle".

Это может быть проблематично с javascript, который динамически добавляет классы, такие как jquery 'addClass'.

Ответ 3

[class^='icon-'], [class*=' icon-']

вы можете сделать с ним две вещи 1. Определите свойство css, например

.icon-otherClass {
/*
*CSS Property
*/

}

это означает, что .icon-otherClass также содержит свойство, которое уже определено в [class ^ = 'icon-'] {/css property/}

  1. используйте как <div class="icon-otherProperty"> </div> <i data-time-icon="icon-otherPropery" data-date-icon="icon-otherPropery"> </i>