有沒有一種更優雅的方式來實現背景色的鏈接，通過目標ID？

我想讓我的wordpress菜單項有2種不同的背景顏色：一個用於鏈接，另一個用於：懸停。我是一名CSS初學者，發現了一個解決方案，但不幸的是它不是一個好的解決方案，因爲我使用wordpress生成的菜單ID作爲目標，如果我刪除菜單並創建另一個菜單，該ID將消失，我的樣式將無法工作。有沒有一種更優雅的方式來實現背景色的鏈接，通過目標ID？

例子：

menu-item-1212 a { 
background-color:#fff; 
} 

menu-item-1212 a:hover{ 
background-color:#000; 
}

有沒有辦法解決這個問題，這樣無論第一個菜單項會產生什麼樣的ID，這將保留該背景色和懸停一個更優雅的方式？我在網上搜索了一個替代方案，發現：nth-child。我確實試過創建這樣的東西：（但它沒有成功）

#menu-secondary li a:nth-child(1) { 
background-color:#fff; 
} 
#menu secondari li a:hover:nth-child(1) { 
background-color:#000; 
}

將感謝任何建議，謝謝。

來源

2013-05-02 James Hector

是'secondari'在這個問題上的拼寫錯誤？或者這也是你的代碼中的錯字？ – George 2013-05-02 15:49:25

你的目標是一個錨是李元素的第n個孩子。每個李只有一個錨可能。您需要針對李爲菜單的第n個孩子，像這樣：

#menu-secondary li:nth-child(1) a { 
    background-color:#fff; 
} 
#menu secondari li:nth-child(1) a:hover { 
    background-color:#000; 
}

來源

2013-05-02 15:50:20 tomca32

哎喲，好像我不明白我的目標是什麼。非常感謝你！ – 2013-05-02 15:58:39

你不會，即使你使用的是共同的背景顏色和共同懸停顏色需要nth-child ..

#menu-secondary li a { 
    /* Styles goes here */ 
}

至於你說的你是不是期待着用一個id，因爲它可能是動態的，比你還可以使用元素選擇，如果它是唯一的選擇元素，如

div.class_name ul li a { /* class_name indicates your wrapper element class name */ 
    /* Styles goes here */ 
}

還要確保你讓你的錨TA g display: block;如果你想掩蓋整個li

來源

2013-05-02 15:52:49

有沒有一種更優雅的方式來實現背景色的鏈接，通過目標ID？

回答

相關問題