一般遇到像ul下面有很对里,如果要是单独获取的话,要给每个小li加一个class名,很麻烦
一般这种情况用到高级选择器nth-child可以来实现
nth-child的使用方法
1、nth-child(number)
一般用法,可以直接在括号里写数字,可以获取ul下的某个具体的li,number写几就是获取第几个标签,可以给他设置css样式了。
2、括号里面可以有几个属性值
odd----获取所有的奇数标签
even---获取所有标签的偶数标签
n-------获取所有的标签(遍历)
如果设置有规律的标签添加数字可以运用n进行运算来找到想要的标签进行设置样式 列入:
.wrap>li:nth-child(5n+5){
font-size: 50px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 200px;
margin-right: 0;
}
效果图如下:
这样就可以给有规律的标签添加属性了
假如在ul标签中有其他的标签呢
我们一加个div标签为例:
在ul标签中加一个标签
例如:
<ul class="wrap">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<div class="clear"></div>
</ul>
那我们想要获取最后一个标签对其设置样式
这个我们只能给标签添加class属性了
但是我们要获取最后一个li怎么获取呢?
正常情况系我们会使用选择器
ul>li:nth-last-child
但是这样真的能获取吗
.wrap>li:last-child{
background-color: red;
height: 200px;
}
我们发现样式没有生效
这是因为我们在使用该选择起的时候我们首先是在类名为wrap的标签中去找到左后一个标签,最后一个标签为div标签,我们再那这个div标签起给li标签做对比,发现拿到的这个标签不是li标签,这样设置的样式就不生效,如果没有div标签则是这个li标签,则样式就会生效!去单独去其他孩子的时候也是同样的效果。
nth-first-child 第一个孩子标签
nth-last-child 左后一个孩子标签