3

たとえば、次のように記述します。

background-color: black;
color: white;

また

color: white;
background-color: black;

2つに違いはありますか?順序を気にする必要がありますか?

4

6 に答える 6

3

いいえ、任意の順序で記述できます。同じセレクター内で重複する場合は、最後のルールが優先されます。

p {
  color:blue;
  color:red;
  color:green; /* Green wins */
}

複数のセレクターを扱う場合、前のセレクターがより具体的でない限り、後で来るルールは前のルールを上書きします。

たとえば、次のコードはすべての段落を緑色にします。

p { color:red; }
/* ... */
p { color:green; }

最初のセレクターがより具体的であるため、このコードはすべての段落を赤くします。

body p { color:red; }
/* ... */
p { color:green; }

セレクター内のルールの順序は重要ではないかもしれませんが、CSS の一貫性を維持し、維持しやすいものにするために、予測可能な順序 (たとえば、サイズ設定ルールの前にルールを配置してから、カラーリング ルールを配置する) でルールを記述するように注意します。

于 2012-10-25T22:44:34.500 に答える
2

あなたの例では違いはありませんが、順序は重要ですが、まれにしかありません。

たとえば、次のようにするのが一般的な場合があります。

display: block;
display: inline-block;

スタイルが同じルールにある場合、パーサーは常に上から下に解釈します。この場合、プロパティが同じ名前であるためinline-block上書きされます。block

でも：

ul li{
  font-size: 14px;
}

ul{
  font-size: 12px;
}

この場合、規則では が の12px後に来ますが、セレクターの優先順位が高いため、14pxリスト項目要素のテキストは になります。14pxul liul

于 2012-10-25T22:44:52.310 に答える
1

一部のスタイル ガイドでは、CSS スタイルをアルファベット順に並べることを推奨しています。これにより、プロパティ定義の重複によるバグの発生を回避できます。

于 2012-10-25T22:47:19.530 に答える
1 
background: none no-repeat 0 0 #ccc;
background-color: #eee;

background-color will be #eee... そのような状況に対処する必要があります ... それ以外の場合は、順序は関係ありません。

一連の値とその単純なサブプロパティを持つ複雑なプロパティの場合 - 慎重に進める必要があります: margin, padding, background... など。

于 2012-10-25T22:47:54.227 に答える
0

宣言の順序は、宣言が同じプロパティに影響を与える範囲で重要です。カスケードルールにより、後者の指定が勝ち、他の条件は同じです。

したがって、この例では、宣言が個別のプロパティに影響を与えるため、順序は影響しません。しかし、例えば宣言では

 font: 100% Calibri; font-weight: bold;

font-weight両方の宣言が（異なる値に）設定されているため、順序は重要です。同様に、

 background: white; backround-image: url(bg.png);

順序は重要です。順序を逆にすると、この場合backgroundを含め、すべての背景プロパティが省略形で設定されるため、背景画像は表示されません。background-image: none

（これは、この質問の複製に対する私の答えを要約して拡張します。）

于 2012-10-26T06:12:38.093 に答える
0

時間順のみが重要なのは、HTML の親/子ノードを持つ要素または以下のような複数のクラスを使用したオーバーライドです。または、同じクラスを記述する同じタイプの複数のプロパティがある場合、Megar が言ったように。最後の 1 つが支配します。したがって、テキストの色は白または #fff になります。

.classname
{
  color:#000;
}

.classnameTwo
{
  color:#fff;
 }

サンプルhtml.

<div class="classname classnameTwo">Color text </div>
于 2012-10-25T22:49:36.730 に答える