设计当前元素的父级

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; 
}