nth類型不工作列表內

我似乎不能改變我的div的背景，當他們在裏面。我認爲這個問題是在我的元素都在爲了做到。nth類型不工作列表內

<ul class="featured-items"> 
     <li><div class="inner"><div class="item-content"></div></div></li> 
     <li><div class="inner"><div class="item-content"></div></div></li> 
     <li><div class="inner"><div class="item-content"></div></div></li> 
</ul> 

.featured-items li .inner:nth-of-type(1) { 
    background-image: url(../images/phone.jpg); 
} 

.featured-items li .inner:nth-of-type(2) { 
    background-image: url(../images/firelace.jpg); 
}

目前，每一個內顯示"phone.jpg"。

來源

2017-02-14 RhysE96

我想'：第n-的-type'應與''一樣.featured項麗li'：第n-的式（1）.inner {...} ' –

https://developer.mozilla.org/de/docs/Web/CSS/:nth-of-type _「：nth-type（an + b）CSS僞類匹配一個元素，該元素具有+ b-1兄弟姐妹在文檔樹中有相同的元素名稱「_ - 你的'.inner'元素沒有_any_兄弟姐妹，它們都是它們父代的唯一孩子。 – CBroe

應該是這樣

.featured-items li:nth-of-type(1)>div.inner { 
 
    background-color: red; 
 
} 
 

 
.featured-items li:nth-of-type(2)>div.inner { 
 
    background-color: yellow; 
 
}

<ul class="featured-items"> 
 
     <li><div class="inner"><div class="item-content"></div>v</div></li> 
 
     <li><div class="inner"><div class="item-content"></div>f</div></li> 
 
     <li><div class="inner"><div class="item-content"></div>vl</div></li> 
 
</ul>

。

來源

2017-02-14 10:06:28

您不想選擇.inner的:nth-of-type()，而是選擇li。那就是：「選擇（N）個列表元素，並應用以下樣式其.inner孩子

.featured-items li:nth-of-type(1) .inner { 
 
    background-image: url(../images/phone.jpg); 
 
} 
 

 
.featured-items li:nth-of-type(2) .inner { 
 
    background-image: url(../images/firelace.jpg); 
 
}

<ul class="featured-items"> 
 
     <li><div class="inner"><div class="item-content"></div></div></li> 
 
     <li><div class="inner"><div class="item-content"></div></div></li> 
 
     <li><div class="inner"><div class="item-content"></div></div></li> 
 
</ul>

來源

2017-02-14 10:05:37 Connum

試試看：

li { 
 
\t border:1px solid red; 
 
} 
 
.featured-items li:nth-of-type(1) > .inner{ 
 
    background-image:url(http://images.clipartpanda.com/flower-clip-art-4c9arqMcE.png); 
 
    background-size:20px 20px; 
 
} 
 

 
.featured-items li:nth-of-type(2) > .inner { 
 
    background-image:url(http://www.clker.com/cliparts/d/E/X/A/4/f/pink-daisy-md.png); 
 
\t background-size:20px 20px; 
 
}

<ul class="featured-items"> 
 
    <li> 
 
     <div class="inner"><div class="item-content">1</div></div> 
 
    </li> 
 
<li> 
 
     <div class="inner"><div class="item-content">2</div></div> 
 
    </li> 
 
    <li> 
 
    <div class="inner"><div class="item-content">3</div></div> 
 
    </li> 
 
</ul>

來源

2017-02-14 10:32:35 Ehsan

nth類型不工作列表內

回答

相關問題