0

私の CSS では、2 つのクラス セレクター (30 列の Twitter ブートストラップ) を使用しています。 

.row-fluid .span9 {
width: 29.5597485%;
*width: 29.50766516666667%;
}

このルールが適用されていることを確認するにはどうすればよいですか? 私が試みた HTML 設定はどちらもうまくいかないようです。これらの適切な構文の 1 つですか、または上記の CSS ルールが HTML に適用されていることを確認する別の方法はありますか?

HTML アイデア 1:

<div class="row-fluid span9">

HTML アイデア 2:

<div class="row-fluid">
    <div class="span9">
4

3 に答える 3

1

あなたが言及したルールは、アイデア＃2にのみ適用されます（アイデア＃1は必要です.row-fluid.span9-クラス間にスペースはありません）。

デバッグに関して: 以下のスクリーンショットは、各要素にどの CSS ルールが適用されているか (また、どのルールが適用されているが、他のルールによってオーバーライドされているか) を正確に確認するのがいかに簡単かを示しています。右端のサイドバーには、この情報が表示されるだけでなく、個々のルールを無効/有効にすることもできます. CSS ファイル/行番号もクリック可能です。

開発に関して言えば、Chrome は他のすべてを水から吹き飛ばすと言いましたか? :)

Chrome デベロッパー ツールの例

フルサイズの画像へのリンク.

于 2012-06-29T19:17:34.197 に答える
1

最初のマークアップは、CSS に基づいて適用されません。

.row-fluid .span9.span9の子孫としてクラスを持つ要素を意味する.row-fluidため、HTML 1 には一致しません。HTML 2 には一致します。

  • 最初の HTML の例は と一致し.row-fluid.span9ます。
  • 2 番目の HTML の例は、 match by .row-fluid .span9、または'.row-fluid > .span9の直接の子のみを確保したい場合です.row-fluid。

また、CSS セレクターを正しく一致させている可能性もありますが、ブートストラップの既定のスタイルのより高い特異性によってスタイルが覆されています。この場合!important、テストするスタイルの最後に をスローします。それは却下します。

FireBug や、試行錯誤よりもはるかに迅速に CSS の問題をデバッグするのに役立つ別の HTML インスペクタを使用することをお勧めします。

于 2012-06-29T19:18:24.273 に答える
0

ルールが、bootstrap.css が読み込まれる前にドキュメントに表示される CSS ファイルまたは<style>タグにある場合、ルールはブートストラップによってオーバーライドされます。

ルールを優先させるためにできることは 2 つあります。ルール自体を拡張することで、より高い「値」を与えることができます。

div.row-fluid div.span9 {
  width: 29.5597485%;
  *width: 29.50766516666667%;
}

または、!important修飾子を使用できます。

.row-fluid .span9 {
  width: 29.5597485% !important;
  *width: 29.50766516666667% !important;
}

最後に、これらのルールは 2 番目の HTML スニペットにのみ適用されます。2 つのクラスを持つ 1 つの要素にルールを適用するには、次のようにする必要があります。

.row-fluid.span9 {  // notice the lack of spaces
  ....
}

ただし、とにかくブートストラップの幅設定をオーバーライドする理由はわかりません。

于 2012-06-29T19:20:41.047 に答える