IE8のCSS3セレクターnth-child()の非互換性問題の解決策

1. コード

<strong><style><br/>ul{<a href="http://www.php.cn/wiki/953.html" target="_blank">list-style</a>: none}<br/>p ul li{<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a>:100px;<a href="http://www.php.cn/wiki/836.html" target="_blank">height</a>:30px;b<a href="http://www.php.cn/wiki/1360.html" target="_blank">ord</a>er:#eee 1px solid;<a href="http://www.php.cn/wiki/919.html" target="_blank">float</a><a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>;}<br/>p ul li:nth-child(1){<a href="http://www.php.cn/wiki/892.html" target="_blank">background</a>:#f00;}<br/>p ul li:nth-child(3){background:#ccc;}<br/></style><br/>    <br/><p><br/>    <ul><br/>        <li>11</li><br/>        <li>22</li><br/>        <li>33</li><br/>    </ul><br/></p><br/></strong>

2. プレビュー効果



上記のように、ie9 以降で背景色を表示できます



問題: 上に示すように, ie8 背景色表示が出ない

3. 解決策

<style>
ul{list-style: none}
p ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}
p ul li:first-child{background:#ccc; }/*选取第一个li*/
p ul li:first-child+li+li{background:#ff0;}/*选取第三个li */
</style>
    
<p>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</p>

4. CSS その他のセレクター

:nth-of-type() selector - セレクターは特定の型の N 番目の要素と一致します子要素の各要素
n には、数値、キーワード、または式を指定できます。 :nth-child(n) とは異なり、後者は型とは関係ありません。 (IE8 ではサポートされていません)

:first-of-type セレクターは、親要素からの特定の型の最初の子であるすべての要素と一致します。
ヒント: :nth-of-type(1) と同等。 (IE8 ではサポートされていません)

:last-of-type セレクターは、親要素の特定の型の最後の子であるすべての要素と一致します。
ヒント: :nth-last-of-type(1) と同等。 (IE8 ではサポートされていません)

:only-of-type セレクターは、親要素である特定の型の唯一の子要素であるすべての要素と一致します。 (IE8 ではサポートされていません)

:nth-last-child(n) セレクターは、要素の型に関係なく、最後の子から数えて、その要素の N 番目の子であるすべての要素と一致します。 n には、数値、キーワード、または式を指定できます。 (IE8 もサポートされていません)
ヒント: :nth-last-of-type() セレクターを参照してください。これは、親要素の指定された型の最後の子要素から数えて N 番目の子要素を選択します。

:nth-last-of-type(n) セレクターは、最後の子から数えて、親要素の特定の型の N 番目の子であるすべての要素と一致します。 n には、数値、キーワード、または式を指定できます。 (IE8 もサポートされていません)
ヒント: :nth-last-child() セレクターを参照してください。これは、型に関係なく、最後の子要素から数えて、親要素の N 番目の子要素を選択します。

:last-child セレクターは、親要素の最後の子要素であるすべての要素と一致します。 (IE8 もサポートされていません)
ヒント: p:last-child は p:nth-last-child(1) と同等です。

:first-child セレクターは、親要素の最初の子要素に属する指定されたセレクターを選択するために使用されます。 IE8 以前のブラウザの :first-child の場合、宣言が必要です。

以上がIE8のCSS3セレクターnth-child()の非互換性問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。