このCSSセレクターとは何ですか？[クラス* =「スパン」]

私はこのセレクターをTwitter Bootstrapで見ました：

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

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

これは属性ワイルドカードセレクタです。あなたが与えたサンプル.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>

良い参考文献

• CSS3属性セレクター：部分文字列マッチング
• 覚えなければならない30のCSSセレクター
• W3C CSS3セレクター

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

これは、クラスshow-gridを持つすべての要素を選択するCSSセレクターであり、クラスにはspanという名前を含む子要素があります。

以下：

.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：これは、セクションを12のパーツに基づいて水平グリッドに分割するBootstrap 2の足場技術span6でした。したがって、幅は50％になります。
• Bootstrap（v.3およびv.4）の当日の実装では、.col-*クラス（例：）を使用しますcol-sm-6。これは、ウィンドウが特定のサイズを下回ったときの応答性を処理するメディアブレークポイントも指定します。詳細については、Bootstrap 4.1およびBootstrap 3.3.7を確認してください。最近は後のブートストラップを使うことをお勧めします

クラス名に文字列が含まれているすべての要素を選択します"span"。そこもだ^=文字列の先頭のために、そして$=文字列の終わりのための。ここにいくつかのCSSセレクターの良いリファレンスがあります：http : //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

私は、ブートストラップ・クラスを持つ唯一のよく知っているspanXXが整数であるが、他のセレクタがあった場合に終了ではspan、それはまた、これらの規則の下に下落するだろう。

包括的なCSSルールを適用するのに役立ちます。