ネストされた要素のCSSとスタイルのオーバーライド

これは別の質問hereに出てきましたが、これはおそらく "ベストプラクティス"アプローチを持っていると思います。ネストされた要素のCSSとスタイルのオーバーライド

ウェブサイトを設計するとき、デザイナーはウェブサイト内のすべての要素に対して一連のジェネリックスタイルを組み込むことが最も一般的です。（Divs/Spans/H1/H2sのテキストの標準フォント）

テーブルの場合、デフォルトのサイトワイズの境界線と線形を定義することができます。

しかし

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
}

あなたが（データグリッド内RSolbergの例から、AJAXカレンダー）、テーブル内のテーブルを持っているならば、あなたの親&ネストした表の両方が両方のこれらのスタイルを継承します。（それがカスケーディングと呼ばれる理由だとしましょう）

私の質問は、サブ要素も継承しなくても、ほとんどの要素の上にスタイルを適用するためのベストプラクティスです。

適用したスタイルを元に戻すオーバーライドを提供するだけですか？

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
} 

Table Table 
{ 
    border: solid 0px #000000; 
    padding: 0px; 
}

出典

2009-04-21 Eoin Campbell

私は両方のこれらのソリューションは男を動作させる知っている。私はHtml/Cssデザイナーの視点からベストプラクティスを考えています。私は、 "Nレベルを深くして停止させる"という魔法のCSSフラグはないと仮定します。 –

あなたは、このようにHTMLを使用している場合：。


<html> 
    ... 
    <body> 
    <div> 
     <div> 
     <div> 
    <div> 
    </body> 
</html>

あなたが唯一の境界線を取得することはできません 子セレクタ（

>) like this:

 body > div { border:solid 1px orange; }

The nested divを使用してbody要素の子であるdivにスタイルを適用することができ

詳細については、http://www.w3.org/TR/CSS2/selector.html#child-selectors

をご覧ください。Internet Explorer 6はサポートしていません子セレクタです。

出典

2009-04-21 18:43:20 knut

ahaこれは私が気にしていたものに近い。 "トップレベルのサイトスタイル"を指定することができます。これは、サイトの主要な構造に適用され、それらの要素の内容を壊すことを心配することなく適用されます。ありがとう –

はい。「テーブルテーブル」ルールはmore specificなので、「テーブル」ルールを上書きします。あなたが説明したのは、一番外側のテーブルに1つのスタイルを、内部テーブルにもう1つのスタイルを持たせる最良の方法です。どちらのテーブルにも、より意味のあるセレクタを使用できるクラスまたはIDがないと仮定します。

実際には、この手法をリストで使用する必要があります。

ol { list-style: upper-roman } 
ol ol { list-style: upper-alpha } 
ol ol ol { list-style: lower-roman } 
ol ol ol ol { list-style: lower-alpha }

出典

2009-04-21 18:30:48

外部表へのクラスまたはIDを追加します：あなたは、あなたがしたいテーブルを想定したHTMLへのidのか、クラスを追加し、できない場合

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
    <table class="outer"> 
    <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
    </tr> 
    </table>  
</body>

はそれをhere

を参照してください。スタイルが別の表内にない場合は、どの要素が次の子であるかを指定してスタイルを設定できます。

div > table {border: dashed 1px #333333;}

参照here

セレクタはIE7でのみ実装されていましたが、IE6をサポートする必要がある場合は、質問からオーバーライドメソッドを使用する必要があります。

出典

2009-04-21 18:36:26

これは必ずしも実現可能なわけではありません。 ID/Classnamesを追加する必要がある場合、HTMLを吐き出すサーバー側のコントロールを扱うシナリオがいくつかあります.ID /クラス名を付け加えると、OnRenderのコードを書くことができます。 –

でフィルタする＃IDs/.ClassNamesがないときに異なるネストレベルでオーバーライドを提供するベストプラクティス方法について説明しています.HTMLに追加することなくそれを行う方法が追加されましたが、IE6が使用されなくなるまで私たちは標準的な練習と呼ぶことができる前にしばらく時間があります –

私はあなたの最初のアイデアには同意しますが、それは状況によって異なります。

常に、ベースルールを作成し、そのルールに対する例外を含むスタイルシートに追加します。

たとえば、テーブル内のテーブルに必ず同じスタイルを適用する必要がないと確信している場合は、「テーブルテーブル」セレクタを使用してスタイルを設定します。しかし、それが一度しか発生しない場合は、親テーブルにクラスを設定し、 "テーブルテーブル"セレクタを "table.parentテーブル"の行に沿ったものに変更してください。

ただし、「parent」は、カレンダーのような要素のわかりやすい名前に変更する必要があります。特定のスタイルの後にクラス名を付けるべきではありません。なぜなら、スタイルが変わっても意味をなさないからです。

出典

2009-04-21 18:54:12

ネストされた要素のCSSとスタイルのオーバーライド

答えて

関連する問題