Question

我正在为我提供一些CSS / SASS for html菜单。当我在关于Red Apples的页面上时，html看起来像这样：

<ul class="navigation">
    <li class="active"><a href="#">Fruit</a>
        <ul>
            <li>Banana
                <ul>
                    <li><a href="#">Yellow</a></li>
                    <li><a href="#">Green</a></li>
                </ul>
            </li>
            <li class="active"><a href="#">Apple</a>
                <ul>
                    <li><a href="#">Green</a></li>
                    <li class="active"><a href="#">Red</a></li>
                    <li><a href="#">Yellow</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Vegetables</a></li>
</ul>

当我在关于苹果的网页上时，颜色上没有active类，因此该部分可能如下所示：

<li class="active"><a href="#">Apple</a>
    <ul>
        <li><a href="#">Green</a></li>
        <li class="active"><a href="#">Red</a></li>
        <li><a href="#">Yellow</a></li>
    </ul>
</li>

同样，如果我在关于水果的页面上，则苹果列表项将失去其active类。

我的问题是，鉴于此标记，是否有一种方法只使用CSS / SASS应用背景颜色仅 active类的最低实例？

修改：Here's a fiddle

Answer 1

CSS不支持任何父选择器。您必须使用JQuery来实现您的要求。

例如，您可以编写以下代码以使您的工作

在Css中给出

li.active{ color: "#ff0000";}

在Jquery

$(".active").has(".active").css("color","#000000");

这将使所有具有类活动的元素将文本颜色设置为红色，并且一旦具有活动类的另一个元素将文本颜色设置为黑色

仅将CSS样式应用于类的最低实例

1 个答案: