IE8でnth-childを使用してリスト内の特定の要素をターゲットにする方法は?

IE8 の Nth-Child と :before

リスト内の特定の要素をターゲットにするために nth-child を使用する機能は強力な CSS です残念ながら、この機能は Internet Explorer 8 (IE8) ではサポートされていません。これは、複雑な HTML レイアウトを操作する場合に大きな障害となる可能性があります。

ただし、隣接兄弟コンビネータ () を使用して、IE8 で同様の機能を実現する回避策があります。このトリックには、最初の子要素をターゲットにし、セレクターを使用して後続の兄弟要素をターゲットにすることが含まれます。

たとえば、リスト内の最初の子をターゲットにして、それに赤い境界線を付けるには、次の CSS を使用できます。

#nav-primary ul li:first-child a {
  border-top: 5px solid red;
}

同様に、2 番目の子をターゲットにして青い境界線を付けるには、以下を使用できます。

#nav-primary ul li:first-child + li a {
  border-top: 5px solid blue;
}

この手法は、要素内の位置に基づいて特定の要素をターゲットにするために使用できます。 :nth-child は IE8 ではサポートされていませんが、リスト。ただし、:nth-child(odd) や :nth-child(4n 3) などの :nth-child のより複雑なバリエーションは、このメソッドを使用してエミュレートできないことに注意することが重要です。

以上がIE8でnth-childを使用してリスト内の特定の要素をターゲットにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。