CSSにはいくつかの派生セレクターがあります

CSS には 3 種類の派生セレクターがあります: 1. 子孫セレクター、構文 "E F{style code}"; 2. 子要素セレクター、構文 "E > F {style code}"; 3.隣接する兄弟セレクター、構文「E F {スタイル コード}」。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS 派生セレクター (コンテキスト セレクター)

セレクター (セレクター) は、CSS の知識の非常に重要な部分です。

私の簡単な理解によれば、CSS は HTML コード内の要素にさまざまなスタイルを適用することです。

したがって、最初のステップは、スタイルを適用する要素を正確に見つけることです。

CSS はさまざまなセレクターを使用して要素を見つけます。 CSSにはセレクターの種類がたくさんありますが、今日は「派生セレクター」についてお話したいと思います。

「派生セレクター」という名前を聞いたとき、それがどのようなセレクターなのかよくわかりませんでした。一見すると英語名は「contextual selectors」ですが、直訳すると「コンテキストセレクター」と呼ばれます。上品な名前ではありませんが、私はこの名前の方が好きです。

コンテキスト セレクターは、その位置における要素のコンテキスト関係に基づいてスタイルを定義します。

コンテキスト セレクターには、子孫セレクター、子要素セレクター、隣接兄弟セレクターの 3 種類があります。

#子孫セレクター

例:

HTML コード:

    <h1>This is a<em>important</em>heading</h1>

CSS コード:

    h1 em {color:red;}

構文規則は、h1 と em の間にスペースがあることです。次に、この CSS コードは、

タグに含まれるすべての 要素に適用されます。

子孫セレクターに関して、非常に重要な点は、最初のパラメーターと 2 番目のパラメーターの間の世代数は無限にできるということです。

例:

HTML コード:

<ul> 
    <li>
        <ul>
            <li>
                <em>This will be styled.</em>
             </li>
        </ul>
    </li>
    <li>
        <em>This will be styled too.</em>
    </li>
</ul>

CSS コード:

ul em{color:red;}

上記の CSS スタイルは、HTML コード内の 2 つのオレンジ色の 要素に適用されます。

#子セレクター

子セレクターは、特定の要素の子要素のみを選択し、子孫要素には展開しません。

例:

HTML コード:

<h1>This is <strong>This will be styled.</strong> important.</h1>
<h1>This is <em>really <strong>This will not be styled.</strong></em> important.</h1>

CSS コード:

h1 > strong {color:red;}

構文規則は次のとおりです。 h1 とstrongの間には「>」記号が入ります。この「>」とその前の h1 または次の Strong の間のスペースはオプションです。

上記の例では、HTML コードの最初の行で、 要素は

の子要素であり、すべての h1 > 強力セレクターによってそれが選択されます。

HTML コードの 2 行目で、 は

の子要素ではなく、

の孫要素であるため、h1 >strong セレクターはそれを選択しません。

隣接兄弟セレクター

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。 

eg：

HTML代码：

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled.</strong>
    <strong>This will not be styled.</strong>
<h1>

CSS代码：

h2 + strong {color:red;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。

在 以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<p> 
    <ul>     
        <li>List item 1</li> 
        <li>List item 2</li> 
        <li>List item 3</li> 
    </ul> 
     <ol> 
         <li>List item 1</li> 
         <li>List item 2</li> 
         <li>List item 3</li> 
    </ol> 
</p>

CSS代码：

li + li {color:red;}

在以上的例子中li+li是选择紧挨着li后面的第一个

，所以第一个

不会被选择；而第二个

是紧挨着第一个li的，所有会被选择；第三个

是紧挨着第二个

的，也会被选择。

（学习视频分享：css视频教程）

以上がCSSにはいくつかの派生セレクターがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。