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

首页课程实战体系课手记专栏慕课教程

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

来源：7-8 切换背景图像综合练习题

慕仰6690464

2016-03-30 16:51

.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;

}

写回答关注

3回答

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 0

Zark0

2016-04-04 00:06:59

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

0 0
自然醒的醒醒

2016-03-30 18:22:48

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

0 0

十天精通CSS3

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题

为什么代码颜色和背景色一样了？看不见代码了？

回答 2

第一个背景图片不能定义成颜色吗？

回答 1

怎么变颜色啊用red或者#999 这种表示也变不了颜色

回答 2

为啥分割线颜色只能写渐变的，直接写颜色不行啊

回答 1

这里背景可以用渐变色吗？

回答 1

打开慕课网App查看更多内容