Question

我有一个由ul和li元素组成的下拉菜单（列表）。

每个li元素都有一个嵌套的a元素。

没有孩子的元素有一个leaf类。

每个列表末尾的元素都会被赋予类last。

（我没有写或设计这个菜单。这是我在工作中分配的项目，菜单由Drupal 7构建）

我修改这些菜单项的唯一方法是通过CSS。

我想修改列表顶级中的最后两个菜单项。

这两个项目都有leaf个班级，最后一个也有班级last。

这是我做的：

.desktop.navigation .leaf {
       padding-left:10px;
       padding-right: 10px;
       margin-right: 5px !important;
       background-color: rgb(55, 166, 97);
}

.desktop.navigation .leaf > a{
       color: white;
       font-weight: bold;
}

.desktop.navigation .last {
       padding-left:10px;
       padding-right: 10px;
       margin-left: 5px !important;
       background-color: rgb(55, 97, 166);
}

.desktop.navigation .last > a{
       color: white;
       font-weight: bold;
}

这个CSS做了我想要的顶级节点，但它也影响了较低级别的节点。

有什么方法可以仅将这些样式应用到菜单的顶级节点？

我能想到隔离这些li元素的唯一方法是他们的ul父级没有ul父级。受影响的其他li元素（我不希望受影响的元素）具有父ul元素，但该父ul元素具有父ul元素

按照@emmanuel的要求;我的HTML的图像（因为Drupal编写了所有的HTML，我无法修改它，否则我不会有这个问题）：

List

Answer 1

您也应该尝试为较低级别的菜单项添加CSS，这将清除您对顶级菜单所做的更改。例如：

.desktop.navigation .leaf li {
    /* css for lower level li */
}
.desktop.navigation .leaf li a {
    /* css for lower level a
}

尝试这样的事情：

ul.menu li a {
    color: white;
    font-weight: bold;
}
ul.menu li ul li a {
    color: blue;
    font-weight: normal;
}

Answer 2

这可能有所帮助。

*:not(li) > ul > li > a {} /* for top level list items */
*:not(li) > ul > li.leaf >a {} /* for top level Leaf items */

第二种方式，或为了更好地理解，首先查找顶级ul的父节点，例如div.navigation，然后使用

div.navigation > ul > li > a {}
div.navigation > ul > li.leaf > a {}

请参阅此小提琴http://jsfiddle.net/MenuSo/jp5L4ehk/3/

Answer 3

你们所有人都发布了非常好的答案，通过你的答案，我学到了很多关于CSS的知识，但我似乎已经解决了我自己的问题。

不幸的是，我无法用一个陈述来确定我想要的确切元素。我不得不针对每个菜单中的每个最后一个孩子，然后使用针对较低级别孩子的取消声明来遵循该陈述。

ul.menu > li.leaf {
       padding-left:10px;
       padding-right: 10px;
       margin-right: 5px !important;
       background-color: rgb(55, 166, 97);
}

/*
Cancel
*/
ul.menu > li.expanded > ul.menu > li.leaf {
       padding-left: 10px !important;
       padding-right: 10px !important;
       margin-right: 0px !important;
}

ul.menu > li.last {
       padding-left:10px;
       padding-right: 10px;
       margin-left: 5px !important;
       background-color: rgb(55, 97, 166);
}

/*
Cancel
*/
ul.menu > li.expanded > ul.menu > li.last {
       padding-left: 10px !important;
       padding-right: 10px !important;
       margin-left: 0px !important;
}

仅将样式添加到顶级元素

3 个答案: