0

p div.myclass有効な CSS セレクターですか? div.myclass を選択したいのですが、それが p の子孫である場合のみです。

<body>
 <div class="myclass">Do not select</div>
  <p>
    <any>...
      <div class="myclass">Select this element to set background & border
        <any>Other stuff may be here</any>
      </div>
    </any>
   </p>
  </div> <!-- added this after question was answered -->
</body>
4

1 に答える 1

5

はい、有効なセレクターです。しかし、aは要素divの有効な子ではありません。pしたがって、CSS は有効ですが、そのセレクターを適用する HTML は無効です。

divちなみに、内にネストされた とは別に、閉じられpていないdivのラップもあり、その後にタグpが続きます。</body>したがって、タグは開いたときと逆の順序で閉じる必要があるため、HTML は二重に無効です。

補遺、コメントで提起されたように (CSS の構文に焦点を当てる代わりに、もともとこれを追加するつもりはありませんでした)、ブラウザ (確かに Chromium 24/Ubuntu 12.10) は、HTML を構築するときに「レスキュー」します。 DOM、だからあなたはこれから行く：

<p>
    <any>...
        <div class="myclass">Select this element to set background & border
            <any>Other stuff may be here</any>
        </div>
    </any>
</p>

次のような DOM に (これも Chromium 24/Ubuntu 12.10 で):

<p>
    <any>...</any>
</p>
<div class="myclass">Select this element to set background &amp; border
    <any>Other stuff may be here</any>
</div>
<p></p>

JS フィドルのデモ。

したがって、問題があり、質問をしている理由が、CSS が要素を選択/スタイル設定していないことである場合、その理由は単純に、無効な HTML を使用しており、構築中にブラウザが HTML を変更しているためです。 (有効な) DOM。これは、セレクターが最初に対象としていたものと一致しなくなったことを意味します。

これが、HTML の妥当性規則に従う必要がある理由です。これにより、作業が容易になります (現在および将来、あなたまたは他の誰かが再訪する必要がある場合)。

ああ、最後に、文字は HTML の文字実体コードの最初の文字であるため、文字を HTML で直接使用する&べきではなく、 などの方法でエンコードする必要があります。つまり、3 つの無効な HTML を作成したことになります。&amp;&

于 2013-02-14T19:25:35.427 に答える