ページに #myid を持つ要素が 1 つしか存在できない場合、b/w E#myid と #myid (E は任意の要素) の違いは何ですか?
5 に答える
#myid
要素に影響を与えないのは、あなたのバグ/間違いでなければなりませんinput
。それは私にとってはうまくいきます。
質問を変更したとき:
同じスタイルシートを使用する 2 つの異なるドキュメントがあるイメージ。あるドキュメントでは、DIV
要素の ID は「foo」であり、別のドキュメントでは、SPAN
要素の ID は同じです。次に、次のスタイルシートを使用して、両方の要素を異なるスタイルにすることができます:
#foo {
color: #FFF;
}
div#foo {
background-color: #F00;
}
span#foo {
background-color: #0F0;
}
両方の要素のフォントの色は同じですが、背景色は異なります。
それらは異なる特異性を持っています。
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
2つのセレクターの特異性は異なります。より具体的なセレクターで指定されたルールは、より具体的でないセレクターで指定されたルールをオーバーライドします。
特異性のルールは本当に簡単です。競合がある場合(同じ要素に異なる値を設定する2つ以上のルール)、次のルールが順番に参照されます。
1)ルールはどの「スペース」に存在しますか?上位の「スペース」のルールは、下位のスペースのルールに自動的に勝ちます。a)ユーザーのスタイルシートで!importantを使用して設定b)作成者のスタイルシートで!importantを使用して設定c)ブラウザのスタイルシートで!importantを使用して設定d )style = ""ルールで設定e)!importantなしでユーザーのスタイルシートで設定f)!importantなしで作成者のスタイルシートで設定g)!importantなしでブラウザのスタイルシートで設定
2)セレクターにはいくつの#idがありますか?#idが多いセレクターは、少ないセレクターに自動的に勝ちます(ルール#1で同点であると想定)。
3)セレクターにはいくつの.classesまたは:pseudoclassesがありますか?.classesが多いセレクターは、.classesが少ないセレクターに自動的に勝ちます(前のルールで同点であると想定)。
4)セレクターにはプレーン要素がいくつありますか?繰り返しますが、多いほど良いです。
5)最後に、ルールはドキュメントのどこまで下がっていますか?以前のすべてのカテゴリに関連付けられている場合、後のルールは前のルールをオーバーライドします。これは、ドキュメント内(CSSファイルの下部と上部)およびドキュメント間(2番目の<link> edcssファイルのルールは最初の<link>edcssファイルのルールよりも「遅い」)に適用されます。 。
特異性を理解すると、より単純なCSSを作成するのに役立ちます。ほとんどの場合、セレクターは可能な限り最も近い#idで開始します。これは、セレクターの広がりを必要な要素に正確に制限し、ドキュメントで設定した「グローバル」cssルールを自動的にオーバーライドするためです。
違いは、異なるページで、その ID を使用して異なる要素を持つことができることです。なぜそれを行うのかは私にはわかりませんが、(ほんの一例として) 一部のページの div が他のページのスパンと同じ属性を取得するために必要になる可能性があります。
ブラウザーが異なれば、指定されていないコーナー ケースでも異なる奇妙な結果が得られます。同じ ID を共有する複数の要素を許可するブラウザーもあれば、許可しないブラウザーもあります。同じブラウザの異なるバージョンでも変化します。使用しているブラウザーがわからないと、バグを再現するのが難しくなりますが、いくつかのブラウザーで CSS をテストすることをお勧めします。
ID が必ずしもページ上で一意であるとは限らないという他の人々の指摘に加えて...
N 個の異なる要素のいずれかに 1 つの ID を適用することができます (例: <UL Id=MyList> または <OL Id=MyList>)。次に、さまざまな要素を処理するためのさまざまな JavaScript を使用できます (つまり、UL を処理するためのコードのビット、OL を処理するための別のコード)。
それが良いデザインになるかどうかは言わないで... 可能だと言っているだけです。
編集: 私が意味するのは、サーバー側が<OL> または >UL> のいずれかでページを生成できるということです...一度に両方ではありません。動的な Web ページを考えてみてください。繰り返しますが...これが良いデザインである場合、私は何らかの形で言っているのではありません.ただ、それは可能です.