Как понять этот CSS наследования (или переопределить, выбор)

Question

Я создаю веб-страницу Jekyll раздвоенной от Pixyll. Во-первых, я действительно новичок в CSS и все, что связано с HTML.

Пожалуйста, обратитесь к снимку экрана. Большее изображение - here, а части HTML/CSS - ниже. Все так же, как есть, за исключением красного содержимого.

Оригинальная тема имеет те же стили для заголовка «Высокий титул» и «О | Контакт». Я хочу изменить вес и шрифт только для плитки сайта.

Оригинальный HTML-код содержит site-title класс для «Awesome title», но CSS не имеет специализированного для класса site-title.

Я добавил .site-title, как показано в красной коробке. Я смог переопределить шрифты, размер шрифта и интервал, но цвет и вес были унаследованы от .site_header. Из моего фона программирования «Awesome title» имеет ближайший CSS-код site-title, а .site_header - внешний вид.

Вопросы:

1. Почему внешние site-header тени внутренние определения из site-title?
2. Что было бы самым элегантным способом определить свой собственный цвет шрифта и т. Д. Для названия сайта?

Answer 1

1. Я считаю, что HTML-теги имеют приоритет над классами CSS. Таким образом, определение css вызовет определение класса CSS .site-title.

2. Вы можете попробовать быть немного фантазер и комбинируя два ..

   header .site-title { 
       color: ; 
       font-weight: ; 
   } 
   

это только о том, что всякий раз, когда есть сайт-название в заголовке, сделайте это CSS.

Answer 2

Причина заключается в том, что в более конкретном определении .site-header a одновременно класса и и элемент участвуют, тогда как в .site-title участвует только класс.

Вместо этого следует использовать a.site-title, и он должен работать до тех пор, пока ваше определение появляется после того, которое вы хотите переопределить в исходном коде CSS.

Это иллюстрирует, как она рассчитывается браузером:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html