CSS3 selector nth-child () incompatible under IE8, css3nth-child

CSS3 selector nth-child () incompatible under IE8, css3nth-child

I. Code

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

Ii. Preview results

For example, the background color of ie9 and later can be displayed.



Problem: for example, the background color of ie8 cannot be displayed.

Iii. Solution

<Style> ul {list-style: none} div ul li {width: 100px; height: 30px; border: # eee 1px solid; float: left;} div ul li: first-child {background: # ccc;}/* select the first li */div ul li: first-child + li {background: # ff0 ;} /* select the third li */</style> <div> <ul> <li> 11 </li> <li> 22 </li> <li> 33 </style>/ li> </ul> </div>

IV. Other css selectors

• : Nth-of-type () selector -- the selector matchesSpecific typeEach element of the nth child element.
  N can be numbers, keywords, or formulas. Different from nth-child (n), the latter is irrelevant to the type. (IE8 is also not supported)

• : The first-of-type selector matches each element of the first child element of a specific type of its parent element.
  Tip: equivalent to nth-of-type (1 ). (IE8 is also not supported)

• : The last-of-type selector matches each element of the last child element of a specific type of its parent element.
  Tip: equivalent to nth-last-of-type (1 ). (IE8 is also not supported)

• : The only-of-type selector matches each element of a unique child element of a specific type of its parent element. (IE8 is also not supported)

• : The nth-last-child (n) selector matches each element that belongs to the nth child element of its element, regardless of the element type, and starts counting from the last child element. N can be numbers, keywords, or formulas. (IE8 is also not supported)
  Tip: see nth-last-of-type () selector. This selector selects the nth child element of the parent element of the specified type and starts counting from the last child element.

• : Nth-last-of-type (n) selector matches each element of the nth child element of the specific type of the parent element and starts counting from the last child element. N can be numbers, keywords, or formulas. (IE8 is also not supported)
  Tip: see nth-last-child () selector. This selector selects the nth child element of the parent element, regardless of type, and starts counting from the last child element.

• : The last-child selector matches each element of the last child element of its parent element. (IE8 is also not supported)
  Note: p: last-child is equivalent to p: nth-last-child (1 ).

• : The first-child selector is used to select the specified selector for the first child element of its parent element. For the first-child browser in IE8 and earlier versions, you must declare it.