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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 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>.


В отношении бутстрапа:

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