12

これは、ここで尋ねられた別の質問から生じましたが、おそらく「ベストプラクティス」アプローチを持っているものだと思います。

ウェブサイトをデザインするとき、デザイナーはおそらくウェブサイト内のすべての要素のための一般的なスタイルのセットをまとめます。（Divs / Spans / H1 / H2sのテキストの標準フォント）

テーブルの場合、デフォルトのサイト全体の境界線と配置も定義している可能性があります...例：

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

ただし、テーブル内にテーブルがある場合（RSolbergの例から、DataGrid内のAJAXカレンダー）、親テーブルとネストされたテーブルの両方がこれらのスタイルを継承します。（それがカスケードと呼ばれる理由だとしましょう）

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

適用したスタイリングを元に戻すオーバーライドを提供する必要があります。

例えば

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

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

4 に答える 4

15

次のような HTML がある場合:


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

子セレクター( _ div_body>) like this:

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

The nested div国境を取得しません。

詳細については、以下をご覧ください。http://www.w3.org/TR/CSS2/selector.html#child-selectors。

Internet Explorer 6 は子セレクターをサポートしていないことに注意してください。

于 2009-04-21T18:43:20.960 に答える
4

はい。"table table" ルールはより具体的であるため、"table" ルールよりも優先されます。あなたが説明したことは、最も外側のテーブルに 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-21T18:30:48.043 に答える
2

外部テーブルにクラスまたは 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>

ここで見る

HTML に ID またはクラスを追加できず、スタイルを設定したいテーブルが別のテーブル内にないと仮定する場合は、次の要素の子である要素を指定してスタイルを設定できます。

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

ここで見る

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

于 2009-04-21T18:36:26.267 に答える
0

私はこれに関するあなたの最初の考えに同意しますが、状況によって異なります.

常に基本ルールを作成し、そのルールに例外を加えてスタイルシートに追加してください。

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

ただし、「親」は要素のわかりやすい名前に変更する必要があります。スタイルが変わると意味がなくなるため、特定のスタイルにちなんでクラスに名前を付けるべきではありません。

于 2009-04-21T18:54:12.760 に答える