10

そのプロパティにデフォルト値がない場合、CSSでプロパティをオーバーライドすることは可能ですか？

たとえば、プライマリスタイルシートが特定の要素の境界線を定義するとします。

#element {
  border: 1px solid #000;
}

セカンダリスタイルシートから境界線を無効にしたい場合は、次のようにすることができます。

#element {
  border: none;
}

セカンダリスタイルシートがプライマリスタイルシートの後にロードされたとすると、border: noneルールが優先され、境界線が削除されます。

しかし、デフォルト値またはnull値を持たないプロパティをオーバーライドしようとした場合はどうなりますか？

#element {
  position: absolute;
  left: 0;
}

次に、セカンダリスタイルシートでこれを実行したいとします。

#element {
  right: 0;
  top: 0;
}

そして、あなたはの値を望んでいませんでしたleft。のようなものはないので、プライマリスタイルシートで割り当てられleft: none;たプロパティをどのように「宣言解除」しますか？left

4

2 に答える 2

20

私があなたの質問を正しく読んでいる場合、プロパティがデフォルト値に計算されるように、あるスタイルシートで、別のスタイルシートにある宣言を「消去」しますか？

現在、ブラウザが特定の要素のデフォルトとして使用する値にリセットする方法はありません。最も近いのはCSS3initialキーワードです。これは、ブラウザの定義ではなく、仕様に従ってプロパティを初期値/デフォルト値にリセットします。

#element {
  left: initial;
  right: 0;
  top: 0;
}

Safari / ChromeとFirefox（as）以外では、ブラウザでのサポートはあまりありません-moz-initial。そのため、次善の策は、初期値を調べてハードコーディングすることです。leftプロパティの場合、それは（autoそして、とにかくすべてのブラウザの任意の要素のこの値であると私は信じています）、したがって：

#element {
  left: auto;
  right: 0;
  top: 0;
}
于 2012-04-17T21:07:13.803 に答える
4

すべてのCSSプロパティにはブラウザに依存するデフォルト値があるため、デフォルト値のないCSSプロパティなどはありません。

BoltClockinitialが述べたように、最良の選択です。

これに関するいくつかの仕様は次のとおりです。

http://www.w3.org/TR/css3-cascade/

編集：

jmbertucciのコメントの前に、私はこれをいつもどのように行っているのか考えていませんでした。

CSSリセットを使用すると、使用するブラウザに依存しない独自のデフォルト値を定義できます。独自のreset.cssで定義するleft: 10px;と、デフォルトにフォールバックする必要があるときに同じ値を使用できます。

たとえば、reset.cssからフォントサイズを探し、それらを使用してテキストの高さに依存する高さの計算を行うことがよくあります。

また、PHPまたはその他の前処理を使用している場合は、CSSファイルにもいつでも使用できます。

<?php
define('DEFAULT_WIDTH', 'width: 100px;');
?>

div {
    top: 100px;
    <?php print DEFAULT_WIDTH; ?>
}
于 2012-04-17T21:13:49.040 に答える