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

Posted 2023-03-06

【中文标题】是否可以仅选择包含具有 CSS 类的元素的 li 元素

【英文标题】：Is it possible to select only li element containing a element with class with CSS

【发布时间】：2013-05-01 00:29:38

【问题描述】：

我有一个简单的 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;

【问题讨论】：

不，目前在 CSS 中不可能。

尝试为li 提供active 类。唯一的另一种方法是涉及看起来不适合样式的 JS...

很遗憾，感谢您的回答

【参考方案1】：

试试这个：

ul li a.active color:green; 

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

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

【参考方案2】：

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

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

【参考方案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");

and for parent（这个类将被添加到 li 元素，它是 a.active 元素的父元素）

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

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

【讨论】：

抱歉，他希望拥有a.active 的容器具有样式。所以样式应该应用在有子a.active的li元素上

【参考方案4】：

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

这里有类似的问题。

Apply CSS styles to an element depending on its child elements