Блог

Главная - Вопросы по программированию - Класс CSS — стиль H2 не отображается

Класс CSS — стиль H2 не отображается

#css

#css

Вопрос:

У меня есть это в моем файле .css:

 h2.spielbox {
    margin-bottom:80px;
    color:#f00;
}

a.spielbox {
    text-decoration:none;
    background-color:#aff;
}

Но в моем html-файле стиль h2 не отображается, в то время как a-style работает:

 <div class="spielbox" style="float:left;width:320px"><h2>Testberichte</h2>

Кажется, я чего-то не знаю о CSS?

Ответ №1:

Это потому, что у вас есть класс, примененный к div . Сделайте это вместо:

 <h2 class="spielbox">Testberichte</h2>

С другой стороны, вы можете сделать это, если хотите оставить его в div:

 .spielbox h2 {
    margin-bottom:80px;
    color:#f00;
}
  • h2.spielbox сопоставляет h2 элементы с классом spielbox
  • .spielbox h2 сопоставляет h2 элементы, которые находятся внутри любого элемента с классом spielbox

Комментарии:

1. Отлично, спасибо. Почему поле по-прежнему не отображается, находится за пределами моего понимания.

2. Классный сайт. Это работает здесь: jsfiddle.net/vzrwK Возможно, вмешивается Drupal. Учусь, ну, я прочитал книгу и уже создал несколько сайтов с использованием CSS. Но я забываю материал или делаю это другим способом, когда что-то не работает.

3.@KarlH.: Да, jsfiddle — это своего рода де-факто демонстрационный сайт, и действительно очень крутой. Поскольку вы сказали, что объявление встроенного стиля работает, я бы предположил, что это связано с наследованием других стилей. Для CSS есть несколько хороших ссылок, если вам интересно узнать больше. Я бы не стал изучать на примере какие-либо таблицы стилей CMS, это будет сбивать с толку.

4. Да, эта тема с наследованием все еще довольно чужда мне. Я должен что-нибудь прочитать об этом.

5. Вот еще одна полезная статья: css-tricks.com/specifics-on-css-specificity Удачи!

Ответ №2:

вы установили класс spielbox для h2, поэтому вам нужно ввести его в h2, 

 <h2 class="spielbox">...</h2>

Комментарии:

1. Спасибо, работает. За исключением нижнего поля. Думал, что класс будет унаследован разделом <div> …

2. Безуспешно. Странно, но это работает: <h2 class=»spielbox» style=»margin-bottom:80px»> XXXXX</h2>