Объединение свойств CSS

Question

Я пытаюсь объединить некоторые из моих CSS, и это довольно простой вопрос, но у меня возникают некоторые проблемы, у меня есть этот код:

h2.post-title, h2.post-title a{
    display:block;
    background-color:#000;
    padding:3px;
    color:#ffffff;
    text-decoration:none;
    text-transform:uppercase;
    font:lighter 130% Georgia, Arial;
}

Нужно ли мне иметь оба этих селектора там? Единственный раз, когда я буду использовать h2.post-title, это будет ссылка. Любые предложения, я попытался удалить первый, но это сделало его ОГРОМНЫМ.

Мысли

Answer 1

Если вы удалите стиль шрифта h2, он вернется к своему стандартному размеру шрифта, который является довольно большим. Вы можете настроить его отдельно:

h2.post-title {
    font-size:130%;
}

Но это займет больше места, чем простая установка обоих селекторов в одном стиле. Мой совет - оставьте все как есть, если у вас нет веских причин изменить его.

Answer 2

Дело в том, что "h2.post-title a" применяется только к -элементу вашего кода. Браузер использует стандартный css на теге

!

Давайте посмотрим на ваш HTML:

<h2 class="post-title"><a href="#">Clickable title</a></h2>

Вам нужны правила для тега

и . Для этого вам нужно включить в таблицу стилей как h2 , так и a (как вы описали).

Решением может быть удаление стиля по умолчанию

с помощью некоторых из многих правил

reset css , которые вы можете найти в Интернете. Другим решением было бы перенести спецификацию классов с "h2" на "a" (и стилизовать только атрибут "a.post-title" в CSS): <h2><a class="post-title" href="#">Clickable title</a></h2> Или, может быть, вы можете полностью удалить тег , просто распечатав . Но это может нарушить вашу семантику.