2

たとえば、要素の直接の子であるdiv > pすべての要素を選択するために使用できます。親と祖父母を持つ要素を選択するために使用することは有効ですか？<p><div>div > p > span<span><p><div>

CSSセレクターの他の演算子はどうですか？'+'div + p + spanまたは'、'を使用することは有効ですdiv, p, spanか？

異なるセレクターを組み合わせてみませんか？のようにdiv + p > span？

4

1 に答える 1

5

セレクターは「オペレーター」という用語を使用しないことに注意してください。および記号は>、+より正確にはコンビネータとして知られていますが、コンマは、セレクタをリストにグループ化するために使用される単なる記号であり、>および+コンビネータと同じカテゴリに属していません。

セレクターレベル4の時点で、コンビネーターは2つの要素間の関係を定義するため、実際にはバイナリです。また、祖父母や他の隣接する兄弟を参照するために、実際に>または+連続して複数回使用することができます。たとえば、div > p > spanは次のHTMLフラグメントを表します。

<div>
  <p>
    <span></span>
  </p>
</div>

そしてdiv + p + span、次のフラグメントを表します。

<div></div>
<p></p>
<span></span>

コンビネータを組み合わせて、さらに複雑な構造を表すこともできます。たとえば、は、次のフラグメントで示されるように、親がaであり、その親がaの直後に続くaをdiv + p > span表します。<span><p><div>

<div></div>
<p>
  <span></span>
</p>

コンビネータを切り替えると、div > p + spanaの<span>直後に続くが、次<p>の子になり<div>ます。

<div>
  <p></p>
  <span></span>
</div>

これが、との両方が同じの子であることを意味していることに注意してください。<span><p><div>

ただし、すべての複雑なセレクターは、右端の要素（セレクターのサブジェクトと呼ばれる）を対象としていることに注意してください。残念ながら、これはバイナリであるコンビネータと相まって、すべての構造を表現できるわけではないことを意味します。これらの概念の両方の非常に詳細な説明と、結果としてそのような制限が発生する理由については、この質問に対する私の回答を参照してください。

複数回使用して、必要な数のセレクターをグループ化することもでき,ますが、これもコンビネーターの概念とは別のものです。違いは、コンビネーターが要素をリンクして単一のまとまりのある構造を表す複雑なセレクターを形成するのに対し、コンマは便宜上、複数の複雑なセレクターを1つのCSSルールにグループ化することです。

于 2012-09-25T20:48:56.827 に答える