CSS3 の最初の子セレクターの実践的なコード

この記事では主に、first-child と :first-of-child の違いや IE 互換性の問題の説明など、CSS3 の first-child セレクターの実践的な戦略を 紹介します。必要な友人は参照してください

:first-child セレクターは、特定の要素HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

// 只套用编号 1 的 li   
li:first-child {   
    color: green;   
}

first-child および :first-of- の最初のオブジェクト グループ (同じ親) を選択できます。 child
のような HTML コードがあるとします。

<p>
    <p>第1个元素</p>
    <h1>第2个元素</h1>
    <span>第3个元素</span>
    <span>第4个元素</span>
</p>

CSS selector: 次の
define メソッドを使用すると、p となります。 :first-child 一致するのは p 要素です。p 要素は p の最初の子要素であるため、
h1:first-child はどの要素とも一致できません。これは、ここで h1 が p の最初の子要素ではなく 2 番目の子要素であるためです。
span:first-child は、どの要素にも一致しません。ここでは、span 要素が p の最初の子要素ではないためです。
:first-child は、p 要素に一致します。これは、ここでは p の最初の子要素が p であるためです。
上記の 2 つの適用された
スタイルは一致できませんが、パニックにならないでください。CSS では、first-of-child擬似クラス も定義されています。その使用法と説明を参照してください: p:first -of-type
は p 要素と一致します。これは、p が p のすべてのサブ要素の最初であるためです。実際、ここには p のサブ要素が 1 つだけあります。 h1: first-of-type が一致します。 h1 要素は次のとおりです。 h1 は p のすべての h1 サブ要素の最初であるため、実際には、 span:first-of-type が 3 番目のサブ要素と一致します。ここで、p にはスパンである 2 つの子要素があり、最初の子要素が一致します。
:first-of-type は p 要素と一致します。

概要
: :first-child は、親要素の最初の子要素と一致します。これは、構造内の最初の子要素であると言えます。 :first-of-type は、型の最初の要素と一致します。その型は、コロンの前に一致するものを指します。たとえば、p:first-of-type は、すべての p 要素の最初の要素を指します。 。もちろん、これらの要素のスコープはすべて同じレベル、つまりピアに属している限り、最初の子要素に制限はありません。
同じタイプのセレクター :last-child と
:last-of-type
、:nth-child(n) と :nth-of-type(n) もこのように理解できます。

IE 互換性の問題
まず、次のコード部分を見てください。HTML 部分:

<ul class="example">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>

CSS 部分:

.example li{float:left;margin-left:10px;}

最初の li の margin-left を 0px に設定する必要がある場合これは、次のメソッドで実現できます:

.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}

ただし、IE6 は :child-first メソッドをサポートしていないため、

を使用して、IE6 もサポートしていることを認識する必要があります。 child-first、theコードは次のとおりです:

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   
.example li:first-child{margin-left:0;}

もちろん、プログラムで必要な場合は、マージン左を再定義するために

を追加することもできます。 li を loop 出力するには、child-first を使用すると、少なくともプログラムの判断が 1 つ減ります。

以上がCSS3 の最初の子セレクターの実践的なコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。