仅向顶级元素添加样式答案

【问题标题】：Add a style to the Top Level element only仅向顶级元素添加样式
【发布时间】：2014-12-25 18:09:38
【问题描述】：

我有一个由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，我不能修改它，否则我不会有这个问题）：

【问题讨论】：

请创建一个包含您的 html 代码的代码 sn-p。
好吧，我猜我可以从 Javascript 控制台窃取它。好的，等等……

标签： html css

【解决方案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;
}

【讨论】：

我明白你的意思，但我必须为每个较低级别的项目制作一个特定的 CSS 声明，并且这个列表会动态变化......
我不知道 HTML 是什么样子的，但是如果您需要一种样式用于顶层，而所有其他菜单项需要不同的样式，那么这应该可以解决问题，因为额外的 css 会影响下面的所有内容.leaf li.

【解决方案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/

【讨论】：

【解决方案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;
}

【讨论】：