Workarounds for CSS3 Selector Nth-child () incompatibility issues in IE8

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.