任務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

關注問題我要回答

737

操作

收起

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）