列表中的基礎字體大小

Question

我正在使用基金會。我有結構，像這樣一個下拉菜單：

<div class="dropdown"><ul><li>...

我想改變這個菜單中的所有元素的字體大小。但是，當我嘗試以.dropdown { font-size: 0.5em; }作爲目標時，我會從基礎樣式中忽略此規則：ul, ol, dl { font-size: 1rem; }。

我唯一的辦法是專門針對列表元素嗎？即.dropdown ul { font-size: 0.5em; }。這引入了許多不需要的特異性。更糟糕的是，嵌套列表還有第二個字體大小的規則，所以我必須考慮更多的特定選擇器。似乎我會絆倒這很多。

我錯過了什麼嗎？我怎麼讓這不是一個煩惱？

Answer 1

您將需要使您的樣式更具體或更改所有列表的默認大小。

原因是ul, ol, dl { font-size: 1rem }。如果它使用em或％代替，那麼它會愉快地從祖先元素（在這種情況下爲.dropdown，即.5em）取其上下文。

所以，你可以做這一點：

ul, ol, dl { 
    font-size: 1em; // or 100% 
} 

或者

.dropdown ul, .dropdown ol, .dropdown dl { 
    font-size: 1em; // or 100% 
} 

他們倆做你正在尋找沒有副作用，將與您提出的風格一起走什麼涉及嵌套時（.dropdown ul { font-size: .5em }）。我提供的第二個選項應該足夠具體，以覆蓋嵌套列表的樣式。