【Foreword】
Student question: The nth-child(n) attribute is invalid in IE8 browser?
【Case】
The nth-child(n) attribute is often used in projects, as shown below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> demo measurement </ title>
<style type="text/css">
*{margin: 0;padding: 0}
.parent{
width: 600px;
height: 300px;
border: 1px solid red;
margin: auto;
}
.parent div{
display: inline-block;
width: 100px;
height: 100px;
*display: inline;
zoom:1;
}
.parent div:nth-child(1){
background-color: red;
}
.parent div:nth-child(2){
background-color: blue;
}
.parent div:nth-child(3){
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
This property has compatibility problems in IE8 browsers, you can use the following methods to deal with compatibility in IE8
【plan】
(1) Option 1
Here I first thought of a simple solution for the CSS sibling selector, because IE supports first-child and last-child, so I can use the sibling selector to solve it.
Disadvantage: When there are too many sub-elements, it is not easy to operate
<style type="text/css">
.parent div:first-child{
background-color: red;
}
.parent div:first-child+div{
background-color: blue;
}
.parent div:first-child+div+div{
background-color: green;
}
</style>
(2) Option 2
Use the selector in jQuery: nth-child instead, the same rules as in css3
:nth-child(odd) is used to match odd child elements
:nth-child(even) is used to match even child elements
:nth-child(n) is used to match the nth element
:nth-child(an) is used to match elements with multiples of a, such as 3n, 5n...
Can be a formula, such as: nth-child(3n+1) matches the 1st, 4th, 7th... elements
:nth-child(-n+3) matches the first 3 elements
:nth-child(-3n+8) matches the 8th, 5th, and 2nd elements
.