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

【问题标题】：Css selector problem - children and parent?Css 选择器问题 - 孩子和父母？
【发布时间】：2011-07-14 04:05:22
【问题描述】：

我想知道如何在我的示例中仅选择顶级“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”具有例如一种红色。解决这个问题的最佳方法是什么？

【问题讨论】：

stackoverflow.com/questions/977883/…的可能重复
@BrianFlanagan 完全不同
什么样的ul包含顶级li？

标签： css css-selectors

【解决方案1】：

你可以这样使用：

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

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

【讨论】：

【解决方案2】：

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

.page_item.parent a{ color:red; }

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

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

【讨论】：

【解决方案3】：

CSS 对某些值使用继承，您可能已经在后代上手动设置color 以否定继承。

请看这里的解释：

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

【讨论】：