設計當前元素的父級

Question

在此代碼中，我希望我的ul具有帶激活li顏色的邊框線。例如，如果.activate元素是灰色的，那麼ul邊框底部必須是灰色的。我如何使用下面的標記來完成此操作？當你想樣式也

<nav> 
    <ul> 
     <li class="gray"><a href="#">All</a></li> 
     <li class="blue"><a href="#">Item 1</a></li> 
     <li class="activate orange"><a href="#">Item 2</a></li> 
     <li class="green"><a href="#">Item 3</a></li> 
    </ul> 
</nav> 

Answer 1

There is no CSS parent selector.只是拍打着<ul>類。

Answer 2

CSS4選擇器是可能的，儘管目前它們不是標準的。

ul!>li.activate.gray {border-bottom-color:gray} 
ul!>li.activate.blue {border-bottom-color:blue} 
ul!>li.activate.orange {border-bottom-color:orange} 
ul!>li.activate.green {border-bottom-color:green} 

W3C description：

E! > F an E element parent of an F element

Answer 3

沒有跨瀏覽器兼容僅CSS解決方案，今天，這裏是一個正在使用jQuery：

小提琴演示：

http://jsfiddle.net/robertp/M9SGU/

標記：

<ul id="menu"> 
    <li class="gray"><a href="#">All</a></li> 
    <li class="blue"><a href="#">Item 1</a></li> 
    <li class="orange"><a href="#">Item 2</a></li> 
    <li class="green"><a href="#">Item 3</a></li> 
</ul> 

的JavaScript：

$('#menu').on('click', 'li', function(event){ 
    event.preventDefault(); 

    var $item = $(event.currentTarget); 
    $item.siblings().removeClass('active'); 
    $item.addClass('active'); 

    $item.parent().css('border', '1px solid ' + $item.css('color')); 
}); 

造型：

.gray, 
.gray a { 
    color: gray; 
} 
.blue, 
.blue a { 
    color: blue; 
} 
.orange, 
.orange a { 
    color: orange; 
} 
.green, 
.green a{ 
    color: green; 
}