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

Я пытаюсь объединить некоторые из моих 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это будет ссылка. Любые предложения, я попытался удалить первый, но это сделало его ОГРОМНЫМ.

Мысли?

10.12.2008 23:17:08
2 ОТВЕТА
РЕШЕНИЕ

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

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

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

2
13.01.2011 12:11:40
Спасибо, я просто не был уверен, есть ли более правильный способ сделать это.
Coughlin 10.12.2008 23:41:07
Это плохая идея. CSS не будет делать то, что кажется на первый взгляд. И светлые, font-weight и 130% font-size являются относительными значениями, поэтому размер шрифта, который вы в итоге получите, будет не 130%, а 130% * 130% = 169%. Вес шрифта, вероятно, не будет затронут, потому что большинство шрифтов в любом случае имеют только два веса. Кроме того, дополнения h2и aбудут складываться в 6px.
mercator 13.01.2011 12:37:14

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

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

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

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

Решением может быть удаление стиля по умолчанию <h2> с помощью некоторых из многих правил сброса css, которые вы можете найти в Интернете.

Другое решение - переместить спецификацию классов с «h2» на «a» (и стилизовать только атрибут «a.post-title» в CSS):

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

Или, может быть, вы можете полностью удалить тег <h2>, просто распечатайте <a>. Но это может нарушить вашу семантику.

-1
10.12.2008 23:38:15