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

Question

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

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

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

Answer 1

Это селектор подстановочного знака атрибута. В приведенном вами примере он ищет любой дочерний элемент в .show-grid, имеющий класс, который содержит 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>

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

• Селекторы атрибутов CSS3: Подстрока соответствует
• 30 селекторов CSS, которые вы должны запомнить
• Селекторы W3C CSS3

Answer 2

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

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

Answer 3

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

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

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

Answer 4

Следующее:

.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>.

InС уважением к Bootstrap:

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