Что это за селектор 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.

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