web-dev-qa-db-ja.com

このCSSセレクターとは何ですか？[class * = "span"]

私はTwitterのブートストラップでこのセレクターを見ました：

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

誰がこのテクニックと呼ばれるのか、そしてそれが何をするのか知っていますか？

csscss3css-selectors
176
jon

これは属性ワイルドカードセレクタです。あなたが与えたサンプルでは、​​それはspanを含むクラスを持つ.show-gridの下の子要素を探します。

そのため、この例では<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、classにという名前の子要素があります。 スパン。

29
Spikeh

クラス名がどこかに文字列"span"を含むすべての要素を選択します。文字列の先頭には^=、文字列の末尾には$=もあります。ここにいくつかのCSSセレクターのためのよい参照があります： http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

私はXが整数であるブートストラップクラスspanXにしか精通していませんが、が終了した他のセレクターがspanにある場合、それは以下のようになります。これらの規則.

それだけで包括的なCSSルールを適用するのに役立ちます。

2
Kevin Li

以下：

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

は、単語 'span'を含むクラスを持つ '.show-grid'のすべての子要素がそれらの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：これは、12の部分に基づいてセクションを水平グリッドに分割するBootstrap 2の足場手法でした。したがって、span6は50％の幅になります。
  • 今日のBootstrapの実装（v.3とv.4）では、.col-*クラス（例：col-sm-6）を使用します。これは、ウィンドウが一定のサイズより小さくなったときの応答性を処理するためのメディアブレークポイントも指定します。詳しくは Bootstrap 4.1 および Bootstrap 3.3.7 を確認してください。私は最近のブートストラップと一緒に行くことをお勧めします
1
Tyler