1

以下は、2 つの URL を挿入した単純な HTML/CSS コードです。

  • 最初の URL (Google) は div の子です。
  • 2 番目の URL (Bing) は、div の子孫にすぎません。

子セレクターの使用は、Google の URL のみを赤色にする必要があることを意味します。

しかし、実装では、どういうわけかGoogle と Bingの両方のURL が赤くなっています。(また、興味深いことに、<h1>Text</h1>要素を削除すると、Google の URL だけが赤色になります。)

理由は何ですか？

HTML の抜粋は次のとおりです。

<div class="mydiv">
    <a href="http://www.google.com">Google</a>
    <p>
        <h1>Text</h1>
        <a href="http://www.bing.com">Bing</a>
    </p>
</div>

そしてCSSの抜粋:

.mydiv > a {
    color:red;
}
4

1 に答える 1

5

これはちょっと難しいです。

まずは<h1>ブロック要素です。次に注意すべきことは、<p>インライン要素のみを含めることができることです。ブロック要素が要素の子として検出されるとすぐに<p>、opened<p>は暗黙的に閉じられます。

したがって、(内部的に) HTML スニペットは次のように変換されます (クロージング</p>が無視されることがわかっている限り):

<div class="mydiv">
        <a href="http://www.google.com">Google</a>
        <p></p>
        <h1>Text</h1>
        <a href="http://www.bing.com">Bing</a>
</div>

ご覧のとおり、両方の<a>タグが直接の子孫である<div>ため、CSS ルールが両方に適用されます。

タグを削除するときの動作は、<h1>それに応じて次のようになります。 Your<p>は暗黙的に閉じられていません。そのため、2 番目<a>は の子のままで<p>あり、CSS は適用されません。

あなたが望むものは<div>、タグの代わりに別のものを使用して最もよく達成されると思います<p>（おそらく<article>、<section>または同様のもの）。

于 2012-09-22T11:30:36.803 に答える