Question

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

以下是我想要应用的样式：

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

但是当我这样做时，它也会影响嵌套的下拉菜单。我应该使用什么选择器？这是网站：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>是上面列表中的子项，或换句话说，它们是包含它们的列表中的子项。正因为如此，他们继承了父母的风格。一种方式（不一定是最好的），但我会使用的方法是以您想要的方式设置父列表的样式，然后创建另一个仅适用于子项的规则，从而覆盖父项的第一个规则。运行顺序在这里很重要。第二条规则是针对孩子的规则必须在针对样式表中父母的规则之后。如果第二条规则稍后出现在样式表中，则第二条规则将仅覆盖第一条规则。

父母的风格：

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

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

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

希望这有帮助。

NEW！

锚标签！

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

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

另一种更整洁的方法可能是为不透明度和颜色设置锚标记的样式而不是列表标记。子列表是父列表的子项，但不是父锚标记，因此设置为顶级锚点的规则不会在层次结构中传递。但是，为了看到样式以您希望的方式影响锚点，您还需要将其显示类型设置为内联块。所以：

.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;
}

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

1 个答案: