0

私は次のようなCSS定義を持っています

.one-table
  width: 500px

.one-table td
  padding: 0

しかし、コンパス/ブループリント0.8.17以降

body.bp table { width: 100% }
body.bp td { padding: 4px }

だから私のテーブルはめちゃくちゃです。また、追加table.one-tableしても役に立ちません。私はそれが特異性を失っていると思います...クラスが直接テーブルにあり、もう一方はクラスが適用されているので、私は非常に驚いていますbody。なぜそれが上書きされるのですか、そしてそれに対する良い回避策は何ですか？

idテンプレートであり、十分に汎用的にする必要があるため、使用できません。!importantまた、後でIE css defを使用する必要がある場合はどうなるのか、使用するのも気が進まない。最新のコンパスにアップグレードすることはできません。アップグレードすると、Webサイト全体の問題も修正される可能性があるためです。ありがとう。

4

1 に答える 1

1

CSS 特異性を計算する方法は次のとおりです。id セレクターの特異性は 100、クラス セレクターは 10、要素セレクターは 1 です。CSS 特異性を計算するには、単に値を合計します。

body.bp tableの特異度は 12 (1 + 10 + 1) でtable.one-table11 (1 + 10) なので、body.bp table勝ちます。

クラスを維持しながらこれを修正するにはone-table、これらのセレクターを使用してみてください。

# Specifity is 20 (vs 12).
.bp .one-table
  width: 500px

# Specifity is 21 (vs 12).
.bp .one-table td
  padding: 0

または、同じセレクターを使用してブループリント ルールをオーバーライドすることもできます。ただし、これらのルールはすべてのテーブルに適用されます。

# This must come after the blueprint rules.
body.bp table
  width: 500px

body.bp td
  padding: 0

blueprint mixin のスコープは class にあるようbpです。.bpこれにより、多くの CSS ルールの前に配置する必要が生じる場合があります。ブループリントのスコープが必要ない場合は、ブループリントに最上位の mixin を使用する必要があります。

+blueprint
于 2010-11-05T05:40:56.000 に答える