问答详情
源自：7-8 切换背景图像综合练习题

任务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 16:51

个回答

  • qq_莳萝泡菜_03359237
    2016-12-07 11:55:01

    :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）

    .slider li:nth-of-type(n) a


    0
  • Zark0
    2016-04-04 00:06:59

    :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素，这里a的同级兄弟元素永远都只有一个，就第一个选择器起作用，其他根本没用！

    0
  • 自然醒的醒醒
    2016-03-30 18:22:48

    选择器 .slider a:nth-of-type(1)表示 .slider  a下面的第一个子级，而不是ul的第一个子级

    0