it-swarm.com.ru

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

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

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

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

176
jon

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

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

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

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

29
Spikeh

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

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

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

2
Kevin Li

Следующее:

.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), которые также определяют точку останова для обработки реагирования, когда окно сжимается ниже определенного размера. Проверьте Bootstrap 4.1 и Bootstrap 3.3.7 для получения дополнительной документации. Я бы порекомендовал пойти с более поздним Bootstrap в наше время
1
Tyler