Question

我有一个简单的菜单，用css设计。

<ul>
    <li> <a href="#">1</a> </li>
    <li> <a href="#" class="active">2</a> </li>
    <li> <a href="#">3</a> </li>
    <li> <a href="#">4</a> </li>
</ul>

是否可以将特定样式应用于li元素，包含带有活动类的。

我尝试过这样的事情：

#container > ul > li a.active < li {
    custom: style;
}

Answer 1

CSS不可能。虽然这可以通过脚本来实现。

这里有类似的问题。

Apply CSS styles to an element depending on its child elements

Answer 2

不，选择器无法反向匹配。在这种情况下，最好的方法是简化问题。

A元素可以设置为块级元素，因此只需将父级LI上的任何样式下移到A元素即可。您已经拥有了特定的选择器a.active，它应该足够清晰，以便您可以适当地设置它们。

Answer 3

#container ul li a.active{ yourstyle:styleproperties;}

或者我认为你可能想这样做

#container ul li a:active{ yourstyle:styleproperties;}

如果你想动态地将类添加到元素，你可以使用javascript和jquery

http://api.jquery.com/addClass/

$("#container ul li a").addClass("active");

和父级（此类将添加为li元素，它是a.active元素的父级）

$('#container ul li a.active').parent().addClass("active");

已有类似主题Target outer div based on class of inner a

Answer 4

试试这个：

ul li a.active{ color:green;}

http://jsfiddle.net/Vloxxity/VZgQx/

编辑：我看过你的评论，这只有在你用活动类标记li时才有可能。

是否可以仅选择包含带CSS类的元素的li元素

4 个答案: