3

CSSの〜と>の目的は何ですか？たとえば、次の式はどういう意味ですか？

:checked ~ label ~ .content > *
4

4 に答える 4

16

セレクターの意味：

次
のクラスが入力要素 の後に続く要素の子である要素を選択します。content
label
:checked

>子コンビネータです。特定の親要素の子である要素を選択します。スペース（子孫コンビネータ）とは異なり、すぐにネストされた要素のみを選択します。それがどのように機能するかについての実例については、この答えを参照してください。

~一般的な兄弟コンビネータです。同じ親内の他の要素の後に続く要素を選択します（つまり、兄弟です）。（隣接する兄弟コンビネータ）とは異なり+、同じ親内の別の要素の直後に続く要素は必要ありません。下の図を、コンビネータをカバーするこの他の答えと比較してください。+

コンビネータは兄弟要素を選択する~だけではないので、注意してください。兄弟の後に来る要素のみを選択するため、チェックされた入力要素の前にある要素とは一致しません。:checked ~ labellabel

イラスト：

<section>
    <input type="radio" name="example1" value="1" checked>
    <label>1</label>
    <input type="radio" name="example1" value="2">
    <label>2</label>
    <input type="radio" name="example1" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [1] Selected -->
        <p>Some text              <!-- [1] Selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [1] Selected -->
    </div>
</section>

<section>
    <input type="radio" name="example2" value="1">
    <label>1</label>
    <input type="radio" name="example2" value="2">
    <label>2</label>
    <input type="radio" name="example2" value="3">
    <label>3</label>

    <div class="content">
        <h3>Subheading 1</h3>     <!-- [3] Not selected -->
        <p>Some text              <!-- [3] Not selected -->
           <em>with emphasis</em> <!-- [2] Not selected -->
        </p>
        <p>Some text</p>          <!-- [3] Not selected -->
    </div>
</section>

選択されたものとされていないもの：

  1. 選択済み
    この要素h3または要素は、親要素pのすぐ内側にあります。.contentその.content要素は少なくとも1つのに続きlabel、これlabelは少なくとも1つの入力要素の後に発生します:checked。

    上記のようにすぐに続くラベルを必要としないため、ここのラジオボタンのいずれかをチェックでき、要素が一致することに注意してください。~また、構造が与えられると、セレクターのいずれかを：~に交換できます。+

    :checked + label ~ .content > *
:checked ~ label + .content > *

    しかし、このセレクター：

    :checked + label + .content > *

    3番目のラジオボタンがチェックされている場合にのみ一致します。これは、その直後labelにaと.content要素が続く唯一のボタンであるためです。

  2. 選択されていません
    この要素は、それ自体がに含まれている要素emの1つにネストされています。こちらのイラストでは、の子ではないため選択しません。p.content.content

  3. 選択されていません
    [1]とは異なり、このセクションのどの要素も入力要素のlabel後に続きません。:checkedしたがって、を満たさないため、ここでは何も選択されません:checked ~ label。

于 2012-05-24T12:02:41.510 に答える
6

Cf. http://www.w3.org/TR/selectors/：

E ~ F E要素の前にあるF要素E要素
E > F の子F要素

于 2012-05-24T12:03:49.347 に答える
2

:checkedラジオボタンまたはチェックボックスの疑似クラスですhttp://reference.sitepoint.com/css/pseudoclass-checked

~一般的な兄弟セレクターです

:checked ~ label選択したチェックボックスまたはラジオボタンの後にあるラベルを選択します（2つの間に任意の数の要素がありますが、それらは同じレベルにあり、ラベルは選択したチェックボックスまたはラジオボタンの後にあります）

:checked ~ label ~ .contentクラスの内容があり、上記のラベルの後にある要素を選択します（ここでも、要素の間に任意の数の要素が存在する可能性があります）

>子セレクターですhttp://www.w3.org/TR/CSS2/selector.html#child-selectors

:checked ~ label ~ .content > *上記の要素の子を選択します

于 2012-05-24T12:12:46.260 に答える
1

*すべての要素が要素の下に
:checkedチェック済みステータス
.クラス名を入力します
>

http://w3schools.com/cssref/css_selectors.asp

このページはあなたに役立ちます

于 2012-05-24T12:04:34.837 に答える