2

これに関連する多くの質問がすでにあります。しかし、私はまだ明確ではありません。また、質問のタイトルが正しいかどうかもわかりません。これが私の問題です：

以下の CSS コードは何を意味しますか?

#nav li { /*some cssA*/ }
#nav li.over { /*some cssB*/ }
#nav li a { /*some cssC*/ }
#nav li a:hover { /*some cssD*/ }
#nav li ul a span { /*some cssE*/ }

私の理解によると、私が間違っている場合は修正してください：

1 行目:li id="nav" を持つ要素内のすべての要素にスタイルが設定されますcssA

行 2:li id="nav" を持つ要素内のすべての要素の上にカーソルを置くと、スタイルが設定されますcssB

3 行目: id="nav" を持つ要素a内のすべての要素内のすべての要素にスタイルが設定されますlicssC

行 4: id="nav" を持つ要素a内のすべての要素内のすべての要素にカーソルを合わせると、スタイルが設定されますlicssD

5 行目: id="nav" を持つ要素span内のすべてaの要素内のすべてのul要素内のすべての要素内のすべての要素は、スタイリングを持ちます。また、親要素に id="nav" がない限り、他の要素または要素にはこのスタイルはありません。licssEula

4

3 に答える 3

3

あなたは.over、「。」を除いてすべて正しいです。クラスを表します。「＃」はIDを表します。しかし、ええ、あなたは概念を理解しています。

また、タイトルのとおり「オーバーライド」したい場合は、追加します

!important

他のルールよりも優先したいルールの最後まで。

于 2013-01-17T18:07:47.863 に答える
3

!important を指定して css をオーバーライドするか、インライン スタイルを指定できます。インライン CSS の優先度が外部 CSS よりも高い

于 2013-01-17T18:13:22.423 に答える
0

既存の回答はすべて正しいですが、すでに与えられたものよりも少し多くあります。

すでに述べたように、"li.over" は複合セレクターです。これは、"over" のクラスを持つ li 要素をセレクターにします。マウスが要素の上にある (ホバーしている) ときに別の CSS プロパティまたはプロパティ値を使用したい場合は、疑似クラスセレクター "li:hover" を使用します。これらは、ドキュメントの一部である何かを選択するのではなく、要素の状態に基づいているため、疑似クラスと呼ばれます。ドキュメントに直接含まれていない疑似要素もありますが、ドキュメント構造の論理拡張です。たとえば、最初の子、最初のタイプ、5番目のタイプ、奇数アイテムなどです。

「#nav li ul a span」は子孫セレクターです。あなたが言うように、各親の子 (任意のレベル) である要素を選択するため、「#nav li」は ID を持つアイテム内に含まれる「li」要素を選択します」 nav" - 数レベル下がっても。

親の直接の子である項目を選択する場合は、>" 記号を使用できます。つまり、"#nav > li" は、ID が "nav" のアイテムのすぐ下にある li 要素を選択しますが、その要素の子である li 要素、またはその下の要素は選択しません。

ちなみに、「#nav」は「*#nav」とまったく同じで、ID を持つ任意の要素を選択します。ID を持つ ul 要素のみを選択したい場合は、「ul#nav」と書くこともできます。これは、クラス「ul#nav.bar」または複数のクラス「ul#nav.bar.touch」と組み合わせることもできます。

このようにセレクター間のスペースを削除すると、セレクターが結合されるため、最後のケースでは、"ul" 要素内の ID "nav" を持つアイテム内のクラス "bar" を持つアイテム内のクラス "touch" を持つアイテムを探す代わりに、 「nav」の ID と「bar」と「touch」の両方のクラスを持つ「ul」要素を選択しています。このような要素-

<ul class="bar touch" id="nav">...</ul>

属性セレクターを使用することも可能です。そのため、新しいウィンドウで開くリンクを選択したい場合は、「a[target=_blank]」を使用できます - これは、属性の存在と値の両方に基づいて選択します - または任意のhref 値を持つリンクを選択したい場合は、「a[href]」を使用できます。これは、この属性を持つすべての要素を選択するだけです。

その上、別の要素に隣接する (隣にある) アイテムを選択することもできます。画像の直後にあるすべての段落を選択する場合は、セレクターで「img + p」を使用するか、「p + img」を使用します。段落の直後に画像を選択したい。いつものように、セレクターの最後の項目は、スタイルが適用される項目です。

コードの再利用性が大幅に低下するため、CSS セレクターを過度に具体的にしないことは、一般的には良い習慣であると考えられています。「div.widget」を記述する必要がない限り、単に「.widget」と記述します。そうしないと、他の要素を使用して「ウィジェット」を作成できず、後でこれらのプロパティをオーバーライドするのがはるかに難しくなります。する必要があるかもしれません。

セレクターをまとめると、 MDNに CSS セレクターの優れた紹介があり、 Code School (有料コース プロバイダー)には、非常にリーズナブルな価格で利用できる CSS に関する優れたオンライン基礎コースもあり、セレクターを詳細に説明します。

クラスのオーバーライドに関して、カスケード順序と特異性という 2 つの概念を理解する必要があります。

次の HTML スニペットが与えられた場合、

<div class="widget">
  <p>
    Some text you want to style
  </p>
</div>

そして、次のCSS-

#widget p { color: yellow; }
p { color: blue; }

最初のセレクターの特異性が 2 番目のセレクターよりも大きい (より具体的である) ため、テキストの色は青ではなく黄色になります。これを理解するには、特異度計算機で遊んで、このテーマに関するSmashing Magazine のチュートリアルを読むことをお勧めします。

要するに、インライン スタイルはすべてに勝っており、セレクターが具体的であるほど、別のプロパティ値を適用する他のセレクターの代わりに適用される可能性が高くなります。特異性スコアが最も高いセレクターの値が「優先」されますが、衝突しない特異性が低いセレクターの他のプロパティ値も引き続き要素に適用されます。

たとえば、以前の CSS を変更すると、

#widget p { color: yellow; }
p { 
     color: blue;
     font-weight: bold;
  }

テキストは黄色のままですが、より具体的なセレクターで font-weight プロパティが指定されていないため、太字になります。

理解する必要がある最後の概念は、2 つ以上のルールが同一の特異性を持つ場合に何が起こるかです。

#widget p { color: yellow; }
#widget p { 
     color: blue;
     font-weight: bold;
  }

この場合、2 番目のルールがスタイルシートの後半に表示され、最初のルールが上書きされるため、テキストは青色になります。複数のスタイルシートがある場合、ドキュメント ヘッドに表示される最後のスタイルシートのルールが、同一の特異性でルールをオーバーライドします。

ほとんどの場合、適切なスタイルを適切な要素に適用するために、スタイルシート内のセレクターのより具体的な順序または順序を使用する必要があり、絶対に必要でない限り、これを達成するために !important フラグを日常的に使用するべきではありません。http://james.padolsey.com/usability/dont-use-important/を参照して、ここで説明するよりも完全な説明を参照してください。ただし、すぐに保守できなくなります (すべてが「重要」な場合はどうしますか)。ユーザー エージェント スタイルシート (ブラウザーのローカル) でスタイルをオーバーライドして、ページを読みやすくしたり使用したりしたい (フォント サイズを大きくしたり、背景色とのコントラストなど) ことを希望するユーザーがアクセスできます。

于 2013-03-17T16:25:20.470 に答える