How to deal with the nth-child () compatibility problem under IE8

This time to everyone to bring IE8 under the nth-child () compatibility problem how to deal with the IE8 under the Nth-child () compatibility issues of attention, the following is the actual case, together to see.

One, the code

<style>
Ul{list-style:none}
P ul li{width:100px;height:30px;border: #eee 1px solid;float:left;}
P ul li:nth-child (1) {background: #f00;}
P UL li:nth-child (3) {background: #ccc;}
</style>
    
<p>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
</p>

Second, the preview effect

For example, IE9 and above background color can display

Problem: For example, IE8 background color is not displayed.

Third, the solution

<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;} /* Select the first li*/p ul li:first-child+li+li{background: #ff0;} /* Select a third Li */</style>    <p>    <ul>        <li>11</li>        <li>22</li>        <li>33</li>    </ul></p>

Iv. CSS Other selectors

: Nth-of-type () selector--Selector matches each element of the nth child element of a particular type that belongs to the parent element.
n can be a number, a keyword, or a formula. Unlike: Nth-child (n), the latter is independent of type. (also does not support IE8)

: The First-of-type selector matches each element of the first child element of a particular type that belongs to its parent element.
Hint: equivalent to: Nth-of-type (1). (also does not support IE8)

: The Last-of-type selector matches each element of the last child element of a particular type that belongs to its parent element.
Hint: equivalent to: Nth-last-of-type (1). (also does not support IE8)

: The Only-of-type selector matches each element of a unique child element of a particular type that belongs to its parent element. (also does not support IE8)

: The Nth-last-child (n) selector matches each element of the nth child element that belongs to its element, regardless of the type of the element, starting with the last child element count. n can be a number, a keyword, or a formula. (also does not support IE8)
Tip: See: Nth-last-of-type () selector, which selects child elements of the nth specified type of the parent element, starting from the last child element.

: Nth-last-of-type (n) the selector matches each element of the nth child element of a particular type that belongs to the parent element, starting with the count from the last child element. n can be a number, a keyword, or a formula. (also does not support IE8)
Tip: See: Nth-last-child () selector, which selects the nth child element of the parent element, regardless of the type, starting with the last child element count.

: The Last-child selector matches each element that belongs to the last child element of its parent element. (also does not support IE8)
Tip: P:last-child is equivalent to P:nth-last-child (1).

: The First-child selector is used to select the specified selector that belongs to the first child element of its parent element. For IE8 and earlier browsers: First-child, you need to declare.

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support the script home.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 's Box-sizing Property graphic tutorial

How to get rid of CSS3 's blur white side

Set scroll bar style