Что делает селектор [class ^ = "span" ]?

Я не могу понять, что это такое:

Линия 33 http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css

.row [class^="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
}

Я понимаю стиль, но я никогда не видел этого раньше

[class^="span"]

Ответы

Ответ 1

Это означает класс, начинающийся со слова "span" , например:

<div class="spanning"></div>

Символ ^ берется из регулярных выражений, где этот символ относится к началу строки.

Следует отметить, что это проверяет начало атрибута класса, а не начало имени класса. Это означает, что он не будет соответствовать указанному селектору:

<div class="globe spanning"></div>

Этот элемент имеет два класса, второй из которых начинается с "span" , но поскольку атрибут class начинается с "глобуса", а не с "span" , он не будет соответствовать.

Можно использовать [class*=span], который возвращает все классы, содержащие span, но это также возвращает другие классы, такие как wingspan.

AFAIK, способ получить классы, начинающиеся со строки, состоит в использовании двойного селектора:

.row [class^="span"], .row [class*=" span"]{}

Это вернет начало класса с span, будь то в начале атрибута или посередине.

(Я также вспоминаю работу в решении в доморощенных селекторных двигателях, используемых DOMParser).

Ответ 2

Это селектор атрибутов, в частности один из CSS3 подгоночные атрибуты выбора соответствия.

Это правило применяет стили к любому элементу, чей атрибут class начинается с span (^= означает "начинается с" ), который встречается в любом элементе с классом row.

Ответ 3

Это селектор атрибутов CSS.

Посмотрите http://www.w3.org/TR/css3-selectors/ (раздел 2)

E [foo ^ = "bar" ] элемент E, значение атрибута "foo" начинается точно со строкой "bar"