html - 尝试仅选择顶级 li 元素并排除导航中的子级别下拉元素

Question

我正在 wordpress 网站上编辑 CSS，但遇到了选择器问题。下面是一些导航。我只想将以下样式应用于顶层 <li>这不是嵌套下拉列表中的那些。但是我应用的所有内容似乎也会影响下拉菜单。

这是我想要应用的样式:

.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 是它们上方列表的子项，或者换句话说，它们是包含它们的列表的子项。正因为如此，他们继承了 parent 的风格。一种方法(不一定是最好的)，但我会使用的方法是按照您想要的方式设置父列表的样式，然后创建另一个仅适用于子项的规则，从而覆盖父项的第一个规则。运行顺序在这里很重要。第二条规则，在样式表中针对 child 的规则必须在针对 parent 的规则之后。如果第二条规则稍后出现在样式表中，则第二条规则只会覆盖第一条。

parent 风格:

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

覆盖您为父项设置的样式的子项样式:

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

希望这对您有所帮助。

新!

anchor 标签!

<a> <li> 中包含的 anchor 标签s 也是父列表的子项，因此继承了不透明状态。这意味着您也需要覆盖样式设置!

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

解决这个问题的另一种更简洁的方法可能是为 anchor 标签设置不透明度和颜色的样式，而不是列表标签。子列表是父列表的子列表，但不是父 anchor 标记，因此设置为顶级 anchor 的规则不会向下传递。然而，为了看到样式以您想要的方式影响 anchor ，您还需要将它们的显示类型设置为内联 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;
}