3

HTML： 

<ul id="menu">
    <li><a href="" class="active">Portfolio</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Testimonials</a></li>
    <li><a href="">Request a Quote</a></li>
</ul>

CSS： 

ul#menu li {
    display:inline;
    margin-left:12px;
}

ul#menu li「 」と「」だけの使い方に違いはあり#menu liますか？私は両方のバージョンを使用しましたが、同じことを達成しているようです。ほとんどのチュートリアルでIDの前に「ul」を追加する理由はありますか？

4

5 に答える 5

12

1つの明らかな違いともう1つの微妙な違いがあります。

明らかな違いは#menu、IDを持つすべての要素を対象としているの#menuに対し、要素ul#menuのみを対象としていることulです。要素にIDのみを指定した場合#menu、ulセレクターは常に同じ結果になります。

特異性と呼ばれるものとの潜在的な違いが1つあります。これは、競合が発生した場合に使用するルールを決定する方法です。したがって、次の2つのルールがある場合：

#menu li {color: blue;}
ul#menu li {color: red;}

2番目のルールはより具体的であり、テキストが赤になるため、勝ちます。特異性のルールは複雑で、常に直感的であるとは限りませんが、この場合、単純な結果は、ul#menu liよりもわずかに特異的です#menu li。スタイルシートが1つしかない場合、これが問題になる可能性はほとんどありません。複数のスタイルシートがある場合、特定のルールが無視されている理由を理解するのは混乱する可能性があります。多くの場合、特異性が答えです。

ほとんどのチュートリアルで使用される理由についてul#menuは、わかりません。（実際、私は彼らがそうしている証拠としてあなたの主張を持っているだけです！）私の推測では、彼らは馬鹿な読者のために物事を本当に非常に明白にしています。

于 2012-05-18T17:32:22.490 に答える
3

レンダリングされる結果は、これらの特定の要素で異なることはありません。

ただし、親IDとタイプを持つul#menu liタイプのすべての要素を対象としているため、より具体的です。li#menuul

  • UL>#MENU>LIのようなセレクターを想像してみてください

#menu lili親IDを持つタイプのすべての要素のみを対象とします#menu。

  • #MENU>LIのようなセレクターを想像してみてください

ほとんどの場合、それらはまったく同じことを行います。#menu liidは特定のものであるため、ページ上の他の要素に影響を与えることはありません。したがって、以下のコメントで示唆されているように、これは不要です。そういうものとして、私はに固執するでしょう#menu li。

于 2012-05-18T17:28:03.493 に答える
2

違いは特異性です。はul#menuより具体的であり、ルールがターゲットとする要素<ul>はメニューのIDを持つ要素である必要があると見なされます。（cssを変更せずに）機能しないメニューのIDを持つに変更<ul>したとします。<div>また、で何かを定義する場合は、#menuを使用してルールをより具体的にすることでオーバーライドを追加できますul#menu。あなたはここでもっと読むことができます：セレクターの戦い-特異性。

于 2012-05-18T17:31:53.273 に答える
0

両者の特異性の違いは、しばしば違いを生むことはありませんが、それが起こる状況を考えることができます。

<div id="menu"></div>あるページと<ul id="menu"></ul>別のページにあり、両方で同じCSSファイルを使用している場合はどうなりますか？それが良い設計上の決定になるとは言いませんが、そのような状況では、との区別ul#menuが#menu重要になります。CSSをすべての要素に適用しますか、それとも要素id="menu"のみに適用しますか？それが違いです。ulid="menu"

于 2012-05-18T17:34:25.233 に答える
0

@jacktheripperと同じ答えを出したいのですが、以下を追加したいと思います。

はい、ul#menu liより具体的ですが、CSSがセレクターを右から左に読み取るため、より多くの解析時間が必要になります。したがって、すべての要素#menuを選択し、その後、すべてのリストを収集しUL、それらから以前に見つかったを含むものを選択します#menu。

これは、セレクターの長いチェーンを使用する場合に、より大きな違いをもたらします:(#mainmenu ul.menu li.current ul li.current多分ではなく#mainmenu .current .current）。

于 2012-05-18T17:35:36.420 に答える