11

だから、これは私がやっていることです：

#id-form td {
padding: 0 0 10px 0;
}

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

テーブルがあり#id-form、その上ですべてtdの s を設定しますpadding-bottom: 10px。
しかし、ある特別な機会に、td私padding: 10pxは#particular-td.

明らかに、CSS スタイルを順番に外部ファイルに入れました。
しかし、レンダリングされた CSS には しかなくpadding-bottom、padding: 10pxオーバーライドされているように見えます!?

説明してください:
どのように、なぜこれが起こっているのですか?
問題を解決するには、これらのルールをどのように調整すればよいですか (インライン スタイリング以外)?

編集：表の'table'前に削除しました。#id-form私はこれを使用したことはありません。よりよく説明できるようにするためにここで言及しました。

4

4 に答える 4

36

CSS の特異性のため。セレクターの重み付けは、それを構成するコンポーネントに基づいて評価されます。idの重み付けは 100、classの重み付けは 10、elementセレクターの重み付けは 1 です。

あなたの例では：

table#id-form td

重み付けは 102 (table#idは 101 でtd1) ですが、これは次のとおりです。

#particular-td

重み付けは 100 です。秒をこれに変更すると、次のようになります。

#id-form #particular-td

前のセレクターをオーバーライドする 200 の重みが得られます。を使用するのは、最後の手段としてのみにしてください!important。

于 2012-10-08T11:14:20.080 に答える
8

これは特異性と関係があります。table#id-form tdより具体的です#particular-td。特異性の高いルールは、特異性の低いルールよりも優先されます。

以下に、その仕組みを理解するためのいくつかのリソースを示します。

他の人が提案したように、!important の使用について:

!importantこれを整理するためにキーワードを使用したくなるかもしれませんが、それはめったに良い考えではありません:

  1. メンテナンス/トラブルシューティングが面倒になる
  2. CSSの通常の流れを壊します
  3. このルールは、後で他のルールによって上書きすることはできません

特異性について読むのに数分かかるかもしれませんが、それを理解すれば、時間を費やすだけの価値は十分にあります。

于 2012-10-08T11:12:40.140 に答える
2

特定の td のパディングの後に !important を追加する方法が 2 つあります。

padding: 10px !important;

または、セレクターを次のように変更します。

table#id-form td#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px;
}

どちらも問題ありません。個人的には、避けられるなら !important の使用は好きではありません。

于 2012-10-08T11:13:46.480 に答える
-1

このコードを試してみてください。css に !important を追加しました。このモードでは、table#id-form td のパディングを無効にすることができます

#particular-td {
border: 1px solid black;
text-align: center;
background-color: #DFDFDF;
height: 30px;
padding: 10px !important;
}
于 2012-10-08T11:11:22.303 に答える