Что это за селектор CSS? [Класс = «Диапазон»]

190

Я видел этот селектор в Twitter Bootstrap:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

Кто-нибудь знает, как называется эта техника и чем она занимается?

css css-selectors джон
источник
1
api.jquery.com/attribute-contains-selector
biziclop
1
Доступно множество интересных CSS-селекторов: w3.org/TR/selectors/#selectors
Тим Медора
jsbin.com/otizoz/edit#javascript,html,live
Роко С. Бульян,
Похожий, но не полный дубликат stackoverflow.com/questions/7366323/… (который ссылается сюда)
BoltClock

Ответы:

332

Это селектор подстановочного знака атрибута. В приведенном вами примере он ищет любой дочерний элемент, у .show-gridкоторого есть класс CONTAINS span.

Итак, выберите <strong>элемент в этом примере:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

Вы также можете выполнить поиск «начинается с ...»

div[class^="something"] { }

который будет работать на что-то вроде этого:

<div class="something-else-class"></div>

и «заканчивается ...»

div[class$="something"] { }

который будет работать на

<div class="you-are-something"></div>

Хорошие ссылки

isNaN1247
источник
1
Я знаю, что это старый ответ, но я бы добавил эту ссылку в список ссылок: w3.org/TR/css3-selectors
Dread Boy
2
Хотели бы добавить еще одну ссылку на тот случай, если люди сочтут это полезным: AllCssSelectors.com
user3339411
6
В div[class^="something"] { }«начинается с» селектор работает только если элемент содержит один класс, или если несколько, когда этот класс является первым один на левой стороне .
Nahn
2
Я бы добавил div[class~="something"]для поиска совпадений в списках, разделенных пробелами (например, классы), и div[class|="something"для сопоставления в списке, разделенном дефисом, например, сопоставление чего-либо в
Ruskin
31 
.show-grid [class*="span"]

Это селектор CSS , который выбирает все элементы с классом шоу-сеткой , которая имеет дочерний элемент , который свой класс содержит имя пядь .

Spikeh
источник
15
на самом деле, он выбирает «дочерний элемент, класс которого содержит диапазон имен», а не «все элементы с классом show-grid»
Utopik
3

Последующий:

.show-grid [class*="span"] {

означает, что все дочерние элементы «.show-grid» с классом, в котором содержится слово «span», получат эти свойства CSS.

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

Все элементы получают удар, кроме самого <span>по себе.


В отношении Bootstrap:

  • span6: это была техника лесов Bootstrap 2, которая делит раздел на горизонтальную сетку, основанную на частях 12. Таким образом span6, ширина будет 50%.
  • В текущей реализации Bootstrap (v.3 и v.4) вы теперь используете .col-*классы (например col-sm-6), которые также определяют точку останова мультимедиа для обработки отклика, когда окно сжимается ниже определенного размера. Проверьте Bootstrap 4.1 и Bootstrap 3.3.7 для получения дополнительной документации. Я бы порекомендовал пойти с более поздней Bootstrap в настоящее время
Тайлер
источник
2

Он выбирает все элементы, где имя класса где-то содержит строку "span". Там также ^=для начала строки и $=для конца строки. Вот хороший справочник для некоторых селекторов CSS: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Я знаком только с классами начальной загрузки, spanXгде X - целое число, но если бы были другие селекторы, оканчивающиеся на span, это также подпадает под эти правила.

Это просто помогает применять общие правила CSS.

Кевин Ли
источник