목록의 기초 글꼴 크기 조정

Question

저는 Foundation을 사용하고 있습니다. 그래서 같은 구조 드롭 다운 메뉴를 가지고 :

<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 }) 두 번째 옵션은 중첩 된 목록의 스타일을 재정의 할만큼 충분히 구체적이어야합니다.