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

Question

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

Строка 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"]

Answer 1

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

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

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

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

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

Вышеупомянутый элемент имеет два класса, второй из которых начинается с «span» - но поскольку атрибут class начинается с «globe», а не с"span", он не будет совпадать.

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

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

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

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

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

Answer 2

Это селектор атрибута, в частности, один из селекторов атрибутов, совпадающих с подстрокой CSS3 .

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

Answer 3

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

Взгляните на http://www.w3.org/TR/css3-selectors/ (Раздел 2)

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