0

cssファイルを含む記事を読みました

#mainNav #toTop a {
    float: right;
    margin: 0 8px 0 0;
    font-size: 40px;
}

#1 つの css id タイプに 2 つのものが含まれている理由を誰かが説明できますか? どうすればそれを使用できますか？

前もって感謝します

4

5 に答える 5

3

「CSS ID タイプ」の意味がわかりません。したがって、CSS の一般的な説明だけを行い、このスニペットが何をしているかが明確になるかどうかを確認します。

CSS には、セレクターとプロパティ ブロックがあります。あなたの質問はセレクターに関するものです:

#mainNav #toTop a

セレクターは、HTML (および場合によっては XML) 要素をターゲットにする (および他のプラットフォームでは照会する) ために使用されます。この特定のルールでは、3 つの単純なセレクター (2 つの id セレクターと 1 つのタグ名セレクター) を 2 つの子孫コンビネーターと共に使用しています。

つまり、セレクターは<a>、任意の要素の子孫である任意のアンカー要素 ( ) をid=toTopターゲットにします (そしてそれに付随するルール ブロックが影響を与えます) id=mainNav。

id 要素は一意であると想定されているため、1 つのセレクターに id 要素を 2 つ持つのはばかげているように思えるかもしれません。必要に応じて実行できますが、必要になる場合もあります。セレクターの特異性については触れていません。

特異性は、どのルールが他のルールよりも優先されるかを定義します。たとえば、2 つの要素が両方とも同じ要素をターゲットにしているように見える場合:

form .label { color: blue; }
#contact-us .label { color: green; }
/* what color is the label? */

...では、どのルールが優先されますか? それを理解するために、特異性を計算します。数学の説明はしません。

では、プロジェクトに変更できない CSS スタイルシートがあるとします。これはサード パーティ ベンダーか何かから提供されたもので、次のようになります。

#toTop a { /*...*/ }

そのルールの影響を受ける要素のスタイルを変更する必要がある場合、どうしますか?

より具体的な新しいルールを定義することができます (おそらくそうするでしょう)。これを行う方法の 1 つは、別の id セレクターをルールに追加することです。

#mainNav #toTop a { /*...*/ }

しかし現実的には、他のセレクターを同じように簡単に追加できます。

div#toTop a { /*...*/ }

現実的には、それが必要かどうかは、何をしようとしているのか、相互作用している他のルールは何か、扱っている HTML の種類によって異なります。

もう 1 つ考慮すべき点があります。CSS スタイルシートは再利用することを目的としています。その要素がドキュメント内の別の場所にある場合、その要素の動作が異なる場合はどうなるでしょうか? id="toTop"あるページでは要素内にあり、id="mainNav"他のページでは別の場所 (要素内としましょう) にある場合はどうなりid="footer"ますか? クライアント側の JavaScript によっては、動くとどうなるでしょうか。次に、次のように CSS を定義することができます。

#mainNav #toTop a { /*...*/ }
#footer #toTop a { /*...*/ }

...最終的には、開発者がこれを行うことを選択する理由は、作業している CSS、JavaScript、および HTML に大きく依存します。それは間違いなく珍しいことですが、不要でも悪い習慣でもありません。

于 2013-03-13T16:44:49.550 に答える
1

#mainNav #toTop a子孫コンビネータを使用して、 idを持つ要素の子孫であるaid を持つ要素の要素の子孫を指定しています。toTopmainNav

他の回答で述べたように、IDs は一意である#toTop a必要があり、トリックを実行する必要があるため、このルールは過度に具体的であるようです。

このルールを宣言する選択の背後にある本当の理由は次のとおりです。

Web サイトに 1 つ以上の共有CSS があると仮定すると (ページごとに異なる CSS を使用する必要はありません)、このルールは次のことを意味します。

  • の子孫であるが要素の子孫でもあるページでaは、このルールを適用します。#toTop#toTop#mainNav
  • の子孫であるが要素の子孫ではないページでaは、このルールを適用しないでください。#toTop#toTop#mainNav

なぜなら、異なる場所 (もちろんページ#toTopごとに 1 つ) で宣言できる再利用可能な要素である可能性があるからです。感じられる。#mainNav#sideNav

于 2013-03-13T17:37:56.230 に答える
1

ID は常に一意である必要があります。ただし、スタイルをより具体的にするために複数の ID を使用することは有効です。

あなたの例では、#mainNav 内で #toTop という ID を持つ要素を探しています。

于 2013-03-13T16:38:08.833 に答える
1

これは完全に有効な CSS ルールです。それは非常に具体的です。この使用の動機は、ページ レイアウトの設計方法や JavaScript ハンドラーが DOM と対話する方法に関係している可能性があります。

于 2013-03-13T16:38:33.567 に答える
1

これは不適切な CSS の例です。あなたの例のセレクター階層は冗長で不要です。の ID を持つ要素の子孫であるすべてのa要素を選択すると表示されます。それは、ID のtoTop要素の子孫ですmainNav。したがって、次のような基本構造を想定しています。

<div id="mainNav">
    <div id="toTop">
        <a href="#">link</a>
    </div>
</div>

ただし、ID は一意である必要があるため、同じ要素をターゲットにするために必要なのは次のとおりです。

#toTop a
于 2013-03-13T16:40:06.770 に答える