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

我在一个wordpress网站上编辑CSS，正在努力使用选择器。下面是一些导航。我只想将以下样式应用于顶层，而不是嵌套下拉列表中的样式。但我应用的所有东西似乎也会影响下拉菜单

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

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

但当我这样做时，它也会影响嵌套的下拉菜单项。我应该使用什么选择器？以下是网站：

---

第二级下拉列表中的无序列表项或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;
}

希望这有帮助

新的

锚定标签

s中包含的锚定标记也是父列表的子项，因此继承父列表的不透明度状态。这意味着您也需要覆盖样式集

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

---

你试过了吗。dropdown>ul li:hover当您将目标锁定在悬停上的li时，它也将覆盖子ul，除非该子ul完全定位在父li之外，但要回答第一部分。dropdown ul>li:hover覆盖在中找到的所有uls。dropdown包括.children及其子级lis@Evan我试过了。不走运。我正在为此而挣扎one@DougFirr也许你可以为我们创建一个JSFIDLE？@Doug Strange-好吧，既然你有一个可用的类，你可以利用.dropdown.main nav>li:hover{background:FFA500；}嗨，Doug。我刚刚对我的答案作了修改。它与在样式表中列出规则的顺序有关。尝试将规则按上面样式表末尾列出的顺序排列。您可能有另一个讨厌的规则，它与样式表中其他地方声明的意图相冲突。最后制定的规则优先于一切。是的，我按照这个顺序在样式表的末尾列出。一定是一条讨厌的规则，再也不可能了！看看，刚刚添加了你的最新更新：但是moleytv的想法是正确的——这是唯一的方法

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