仅向顶层元素添加样式

我有一个由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元素。

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

List

来源

2014-10-29 WebWanderer

请创建一个包含您的html代码的代码片段。 – emmanuel 2014-10-29 20:59:30

好吧，我可以从Javascript控制台上偷取它。好吧，坚持... – WebWanderer 2014-10-29 21:00:58

你应该尝试添加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; 
}

来源

2014-10-29 21:00:50 cakan

我明白你的意思了，但我必须为每个较低级别的项目制作特定的CSS语句，并且此列表动态变化... – WebWanderer 2014-10-29 21:02:15

我不知道HTML的外观如何，但如果你需要一种顶级风格和所有其他菜单项的不同风格，那么这应该做到这一点，因为额外的CSS会影响'.leaf li'下面的所有内容。 – cakan 2014-10-29 21:04:01

这可能会有帮助。

*: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/

来源

2014-10-30 05:07:31

所有你发布了很好的答案，通过你的回答，我学到了很多关于CSS的知识，但是我似乎解决了我自己的问题。

Unfortunatley，我无法用一个声明来确定我想要的确切元素。我必须针对每个菜单的每一个最后一个孩子，然后按照这个陈述为低等级的孩子取消陈述。

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

来源

2014-10-30 14:58:47 WebWanderer

仅向顶层元素添加样式

回答

相关问题