任务1处问什么不能用按照下面这样写啊？？？背景颜色都变成一样的了 why？

.slider a:nth-of-type(1) {

background-color: #02646e;

}

.slider a:nth-of-type(2) {

background-color: #eb0837;

}

.slider a:nth-of-type(3) {

background-color: #67b374;

}

.slider a:nth-of-type(4) {

background-color: #e6674a;

}

.slider a:nth-of-type(5) {

background-color: #e61061;

}

慕仰6690464

2016-03-30

源自：十天精通CSS3 7-8

关注问题我要回答

699

操作

收起

3 回答

qq_莳萝泡菜_03359237
2016-12-07

:nth-of-type是匹配同类型元素的，可以再复习一下这一节课。再来看这里的html结构：

<div class="slider">
    <ul class="clearfix">
        <li><a href="#bg1">Hipster Fashion Haircut </a></li>
        <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
        <li><a href="#bg3">My haire is sooo fantastic!</a></li>
        <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
        <li><a href="#bg5">Lips so kissable I could die ...</a></li>
    </ul>
</div>

每个<li></li>下只有一个a元素，而你的思路是选择.slider下的<a>元素。问题在于<a>标签被<li>标签包起来了。

应该先匹配li元素，再选择每一个li下的a元素：（n可以是1,2,3,4,5）