Próbuję dowiedzieć się, dlaczego jedna z moich klas css wydaje się zastępować drugą (a nie na odwrót)
Tutaj mam dwie klasy css
.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}
.smallbox-paysummary {
@extend .smallbox;
font-size:10px;
}
i moim zdaniem dzwonię
<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">
Czcionka (nakładający się element) jest wyświetlana jako 10 pikseli zamiast 20 - czy ktoś mógłby wyjaśnić, dlaczego tak jest?
@extend
- jeśli robi to, co myślę, że robi - i używać obu selektorów na tym samym elemencie.
.smallbox-paysummary
) I opcjonalnie uczynić deklarację CSS bardziej precyzyjną (bez polegania na kolejności pojawiania się w pliku CSS) przy użyciu opcji.smallbox.smallbox-paysummary { font-size: 10px; }
.smallbox-paysummary
aby czcionka była mniejsza, dlaczego w pierwszej kolejności ją zmniejszasz?
@extend .smallbox;
, co wygląda jak niestandardowy CSS.