Css3セレクター(2)_html/css_WEB-ITnose

1. ID セレクター

ID セレクターはクラス セレクターに似ていますが、いくつかの重要な違いがあります

例: #id {}

2. クラスセレクターと ID セレクターの違い

ID のみ使用可能in ドキュメント内で 1 回使用されますが、クラスは複数回使用できます

<div id="myDiv">HelloWorld</div><div class="div1"></div><div class="div1"></div><div class="div1"></div>

ID セレクターは併用できません

JS を使用する場合は、id を使用する必要があります

3. 属性セレクター

1. 単純な属性の選択:

例: [title]{ }

<p title="">Hello</p>[title]{    color: aqua;}

2. 特定の属性値に基づいて

を選択するだけでなく、選択範囲をさらに絞り込んで選択することもできます。特定の属性値を持つ要素

例: a[href="www.baidu.com"]{};

[href]{    font-size: 30px;}<a href="">百度</a>

3. 属性と属性値

[href="https://www.baidu.com"]{    font-size: 30px;}<a href="https://www.baidu.com">百度</a>

4. いくつかの属性値に基づいて

<p title="a">Hello</p><p title="b">Hello</p><p title="c a">Hello</p><p title="d a">Hello</p><p title="ea">Hello</p>[title~="a"]{    font-size: 50px;}

を選択します4. 子孫セレクター

1. 子孫セレクターは、要素

<p>This is my <strong>web</strong> page</p>p strong{    color: fuchsia;}

の子孫である要素を選択できます。

5. 子要素の選択

1. 子孫セレクターと比較して、子要素セレクターは選択のみを行うことができます。要素

の子である要素は、世代スキップが不可能な場合、現在の 1 つの 階層関係のみを選択できます。
例: h1>strong{};

複数のレイヤーがある場合は、

p>i{    color: fuchsia;    font-size: 30px;}<p>This is my <strong>web <i>Hello Hello</i></strong> page</p>

6. 隣接する兄弟セレクター

1. 隣接する兄弟セレクターは、別の要素の直後の要素を選択でき、両方とも同じ親要素 を持ちます。
注 2 つのポイント

1 つは、要素の後の要素を選択することです。これは、現在の要素には影響がないことを意味します

2 番目のポイントは、2 つの親要素が同じであることに注意することです

例: h1+p{};

このセレクターは、実際のアプリケーションでよく使用されます。ここで少し学ぶことができます

li+li{    font-size: 50px;    color: red;}<div>    <ul>        <li>item1</li>        <li>item2</li>        <li>item3</li>    </ul></div>