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

目前还没有跨浏览器兼容的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 description：

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

设置当前元素的父级样式

3 个答案: