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.