尝试仅选择顶级 li 项目并排除导航中的子级下拉项目

Question

我在 wordpress 网站上编辑 CSS 并在选择器上苦苦挣扎。下面是一些导航。我想仅将以下样式应用于顶层<li>s，而不是嵌套下拉列表中的样式。但我应用的所有内容似乎也会影响下拉菜单。

这是我要应用的样式：

.dropdown ul li:hover {
    background: orange;
    opacity: 0.4;
}

但是当我这样做时，它也会影响嵌套的下拉菜单 li 项目。我应该使用什么选择器？这里是网站：http://gcameron8977.webfactional.com/

<nav>
    <div class="dropdown dropdown-horizontal">
      <ul class="main-nav">
        <li ><a href="http://gcameron8977.webfactional.com/">Home</a></li>
        <li class="page_item page-item-57"><a href="http://gcameron8977.webfactional.com/?page_id=57">Clear Outs &#038; Offers</a></li>
        <li class="page_item page-item-8 page_item_has_children current_page_ancestor current_page_parent"><a href="http://gcameron8977.webfactional.com/?page_id=8">Flooring</a>
           <ul class='children'>
             <li class="page_item page-item-19"><a href="http://gcameron8977.webfactional.com/?page_id=19">Chestnut</a></li>
             <li class="page_item page-item-15"><a href="http://gcameron8977.webfactional.com/?page_id=15">Douglas Fir</a></li>
             <li class="page_item page-item-12"><a href="http://gcameron8977.webfactional.com/?page_id=12">Heart Pine</a></li>
             <li class="page_item page-item-17"><a href="http://gcameron8977.webfactional.com/?page_id=17">Maple</a></li><li class="page_item page-item-10 current_page_item"><a href="http://gcameron8977.webfactional.com/?page_id=10">Oak</a></li>
           </ul>

我尝试了一些方法，包括： .dropdown ul > li:hover { // 注意右箭头。这不应该意味着只有 .dropdown ul 的第一代子代吗？

也试过这个：

.dropdown > ul > li:hover // same logic but still impacts the sub menu?

Answer 1

第二级下拉列表中的无序列表项或<li>s 是它们上方列表的子项，或者换句话说，它们是包含它们的列表的子项。正因为如此，他们继承了父母的风格。一种方式（不一定是最好的），但我会使用的方式是按照您想要的方式设置父列表的样式，然后创建另一个仅适用于子级的规则，从而覆盖父级的第一条规则。运行顺序在这里很重要。第二条规则，以子代为目标的规则必须在样式表中以父代为目标的规则之后。如果第二条规则出现在样式表的后面，它只会覆盖第一条规则。

父母的风格：

.dropdown ul li:hover {
    background: orange;
    opacity: 0.4;
}

覆盖您为父级设置的样式的子级样式：

.dropdown ul li li:hover {
    background: black; /* Or whatever your default color is*/
    opacity: 1;
}

希望这会有所帮助。

新！

锚标签！

<a> 包含在您的 <li> 中的锚标记也是父列表的子级，因此继承了不透明状态。这意味着您也需要覆盖样式集！

.dropdown ul li li a:hover { 
    background: black; /* Or whatever your default color is*/
    opacity: 1;
}

解决此问题的另一种更简洁的方法可能是为锚标签设置不透明度和颜色的样式，而不是列表标签。子列表是父列表的子列表，但不是父锚标记，因此设置为顶级锚的规则不会向下传递层次结构。但是，为了查看样式以您想要的方式影响锚点，您还需要将它们的显示类型设置为 inline-block。所以：

.dropdown  a { 
    display:inline-block; /* will make all your navigations anchors inline-block*/
    /*Style all your navigation links in here, rather than styling their parent li's*/
    background:white; /*or whatever*/
}


.dropdown ul li a:hover {
    background: orange; /* Or whatever your default color is*/
    opacity: 0.4;
}