1.nth-child简介:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
padding: 0;
margin: 0;
}
.box {
width: 50px;
height:50px;
line-height: 100px;
text-align: center;
font-family: Arial;
font-size: 18px;
}
li{
float: left;
}
/*
表达式: an+b
a
1.分组的方向(正数 从左向右,反之从右向左)
2.几个元素一组
b
分组的起始位置(如果是负数,浏览器默认补齐)
*/
/*需求:选择前三个元素*/
/*li:nth-of-type(-n + 3){*/
li:nth-child(-n+3){
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
<li class="box">7</li>
<li class="box">8</li>
<li class="box">9</li>
</ul>
<script type="text/javascript">
//Add your code
</script>
</body>
</html>
2.nth-child和nth-of-type的区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/*Add your CSS*/
}
/*p:nth-of-type(3){ 要是相同的选择器标签才算个数*/
/*不分选择器标签*/
span:nth-child(3){
color: red;
}
</style>
</head>
<body>
<div class="box">
<div>1111</div>
<span>2222</span>
<p>3333</p>
<span>4444</span>
<p>5555</p>
<p>666</p>
<span>7777</span>
</div>
<script type="text/javascript">
// Add your code
</script>
</body>
</html>