2

Twitterのブートストラップでは、最近、これらのタイプの選択に直面しました

[class*="span"],
.uneditable-input[class*="span"],
.row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

[class*="span"]それは、「スパン」を含むクラス名を持つすべての要素を意味することを知っており、残りのcssに精通しています。

しかし、なぜ動作するかを選択.row-fluid [class*="span"]する必要があるのでしょうか?[class*="span"].row [class*="span"]

私はこの部分を削除しました（冗長だと思ったので）が、要素内にある場合、ブラウザはスパンクラス名を持つ要素を選択しないよう.row-fluidです. 誰かがこの動作を説明できますか?

4

1 に答える 1

1

David Taiaroaに感謝します（質問の下のコメントと彼の有益なリンクを参照してください）。これが発生する理由は、セレクター仕様の優先順位です。後で定義されたプロパティが以前のプロパティをオーバーライドすると思っていましたが、配置場所に関係なく、より具体的なセレクターがより一般的なセレクターをオーバーライドすることがわかりました。

この場合.row-fluid span1、.row-fluid span2etc は、さまざまな場所でブートストラップで幅を設定するために特別に選択されています。したがって[class*="span"]、より一般的なセレクターであるため、それらをオーバーライドすることはできません。.row-fluid [class*="span"]これは、これらの要素を選択するために必要な方法です。

于 2013-08-03T20:55:48.730 に答える