李：最後一個孩子格式內的div

Question

警告......不是這裏的CSS工具箱中最尖銳的工具...

我想使用的UL ...寫的樹控制和粘貼在CSS問題。爲了簡化問題，我將這個例子簡化爲一些可能沒有意義的事情，但CSS問題的本質是儘可能簡單。

考慮這個網站：

<ul> 
    <li><div>should be green :)</div> 
     <ul> 
      <li><div>should be green :)</div></li> 
      <li><div>should be red :)</div></li> 
     </ul> 
    </li> 
    <li><div>should be red :)</div> 
     <ul> 
      <li><div>should be green !!!!!!!!!!!!</div></li> 
      <li><div>should be red :)</div></li> 
     </ul> 
    </li> 
</ul> 

這個CSS：

ul li{ 
    background-color: green; 
} 

ul li:last-child div{ 
    background-color: red; 
} 

的一項寫着：

<li><div>should be green !!!!!!!!!!!!</div></li> 

顯示爲紅色，而不是綠色!!!!!

由於包含它被包含在一個LI是不是最後的名單在div，我預計它，而不是使用最後孩子選擇

這裏的正常選擇是你的名聲提琴點尋求樂趣！

http://jsfiddle.net/dmd1214/5Vm58/16/

Answer 1

您需要使用Child selector選擇的li的最後一個元素（DIV）。

ul li:last-child > div{ 
    background-color: red; 
} 

JS Fiddle

Answer 2

讓你的後代選擇一個子選擇：

ul li:last-child > div { 
    background-color: red; 
} 

這樣的話，它只有<div>元素是最後一個<li>元素的子元素相匹配。

演示：http://jsfiddle.net/5Vm58/20/

Answer 3

這是因爲你與你的:last-child使用靶向div。

ul li { 
    background-color: green; 
} 

ul li:last-child { 
    background-color: red; 
} 

小提琴：http://jsfiddle.net/5Vm58/19/