2014-02-25 117 views
0

我有一個自動生成所創建的以下的WordPress菜單:突出父李當子李

<li class="page_item page-item-23 page_item_has_children"> 
    <a href="#">Main item 1</a> 
    <ul class="children"> 
     <li class="page_item page-item-52498 current_page_item"> 
      <a href="#">Item 1</a> 
     </li> 
     <li class="page_item page-item-52496"> 
      <a href="#">Item 2</a> 
     </li> 
     <li class="page_item page-item-52477"> 
      <a href="#">Item 3</a> 
     </li> 
    </ul> 
</li> 

我想說,當我在第一個子項目,突出主禮。

這是我使用的CSS(理想情況下,這將是更簡單,但由於自動生成的菜單這是一個有點凌亂的性質!):

.page-item-52498.current_page_item li.page-item-23 a { 
    color:white!important; 
    font-family:'Museo Sans W01 500'!important; 
} 

在這沒有按」瞬間t使第一個li a白色。

+2

沒有可能單獨使用CSS,而不是使用'.page_item_has_children:懸停{color:#f00;}'並設置活動st的顏色吃了,這樣它將應用顏色,即使當你移動子菜單上的光標 –

+0

請參閱這裏:http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – DonJuwe

回答

1

該CSS選擇器不起作用。您不能選擇.page-item-23作爲.page-item-52498的子項,因爲它是標記結構中其他項的容器。

您是否嘗試過使用WordPress的body_class函數輸出頁面ID?然後你可以嘗試使用諸如body.page-id-52498 li.page-item-23 a或類似的選擇器。

<!-- <head> somewhere above --> 
<body <?php body_class(); ?>> 
<!-- rest of the template somewhere below --> 

它應該類似這樣輸出的東西(當然是一個動態的ID號):

body_class功能(在WordPress的header.php模板文件最有可能)使用這樣的

<body class="page page-id-112 page-template logged-in admin-bar"> 

每當您使用body_class並輸出您在我上面寫的CSS選擇器中聲明的特定頁面ID時,它會生效(遵循標準的級聯規則當然)。