CSS在此標記中選擇一個元素

Question

我有以下標記，我無法更改。我只想將特定的css應用於位於div末尾的特定css，而不應用於某個其他div內的任何css。可以選擇它嗎？

<div class="box"> 
    <div class="another"> 
     <ul> 
      <li>not</li> 
      <li>this</li> 
     </ul> 
    </div> 
    <ul> 
     <li>select</li> 
     <li>this</li> 
    </ul> 
</div> 

我試過，.box ul:last-child但它不起作用。

http://jsfiddle.net/7e53A/

Answer 1

試試這個DEMO

.box > ul{ 
    border: 1px solid red; 
} 

這意味着排序：選擇內.box的ul但沒有任何其他的孫子們。

@科希克的評論：如果你有一個以上的ul在.box那麼你可以添加:last-child到你的CSS：

.box > ul:last-child{ 
    border: 1px solid red; 
} 

Answer 2

示例代碼使用jQuery的jQuery code和CSS code找到最後一個節點

$(document).ready(function(){ 

$(".box ul").last().css("color", "red"); 

}); 

Answer 3

你非常接近。你只需要使用直接子選擇器>。

有用的文章：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

.box > ul:last-child{ 
    border: 1px solid red; 
} 

JSFiddle Demo