html - 样式化当前元素的父元素

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

没有 CSS 父选择器。<ul>当你想设计它的样式时，只需给它一个类。

Answer 2

到目前为止，没有跨浏览器兼容的唯一 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;
}

Answer 3

使用 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 说明：

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