Question

我有一个自动生成的Wordpress菜单，它创建了以下内容：

<li class="page_item page-item-23 page_item_has_children">
    <a href="#">Main item 1</a>
    <ul class="children">
        <li class="page_item page-item-52498 current_page_item">
            <a href="#">Item 1</a>
        </li>
        <li class="page_item page-item-52496">
            <a href="#">Item 2</a>
        </li>
        <li class="page_item page-item-52477">
            <a href="#">Item 3</a>
        </li>
    </ul>
</li>

我想说当我在第一个子项目时，突出显示主要的li。

这是我正在使用的CSS（理想情况下这会更简单，但由于自动生成菜单的性质，它有点乱！）：

.page-item-52498.current_page_item li.page-item-23 a {
    color:white!important;
    font-family:'Museo Sans W01 500'!important;
}

目前这不会使第一个li a白色。

Answer 1

那个CSS选择器不起作用。您不能选择.page-item-23作为.page-item-52498的子项，因为它是标记结构中另一个的容器。

您是否尝试使用WordPress的body_class功能输出页面ID？然后，您可以尝试使用body.page-id-52498 li.page-item-23 a或类似的选择器。

使用body_class函数（最有可能在WordPress的header.php模板文件中）：

<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->

它应该输出与此类似的东西（当然还有动态ID号）：

<body class="page page-id-112 page-template logged-in admin-bar">

每当你使用body_class并输出你在我上面写的CSS选择器中声明的特定页面ID时，它将生效（当然遵循标准的级联规则）。

Answer 2

未来之一 - 主题选择器应该到达CSS4。它会变得非常强大，但我认为很容易被滥用。

语法

!subject > selector {
    /* declarations */
}

实施例

!ul > li {
    border: 1px solid green;
}

向下滚动到父选择器：http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/

在sub li上突出显示父li

2 个答案: