Question

我想知道如何在我的例子中只选择顶级“Mega Parent”？

<li class="page_item parent"><a href="#"> Mega Parent</a>
        <ul class="children">
            <li class="page_item parent"><a href="#">Subparent</a>
                <ul class="children">
                    <li class="page_item"><a href="#">Child</a></li>
                </ul>
            </li>
        </ul>
    </li>

我只想要我的顶级父项“Mega Parent”一种红色。解决这个问题的最佳方法是什么？

Answer 1

您可以使用以下内容：

.page_item.parent > a { color: red; }
.page_item.parent li > a { color: inherit; }

或者你可以在megaparent的元素中添加一个额外的类，它会设置一个额外的样式。

Answer 2

这应该在定义类时解决，而不是在解决它们时解决。但是如果你不能定义它们，我会为嵌套的一个选择不同的选择器来覆盖你应用于所有元素的默认值

.page_item.parent a{ color:red; }

.page_item.parent ul.children .page_item.parent{ color:black;}

或任何其他类型的默认样式，您也可以将第二个选择器附加到其他定义。

Answer 3

CSS对某些值使用继承，您可能会在后代上手动设置color以取消继承。

请参阅此处获取解释：

http://dorward.me.uk/www/css/inheritance/

Css选择器问题 - 孩子和父母？

3 个答案: