僅向頂層元素添加樣式

我有一個由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

僅向頂層元素添加樣式

回答

相關問題