Как стилизовать подмножество некоторого текста в HTML / CSS?

Question

В настоящее время я делаю что-то вроде этого:

<h2><div class='q'>Q:</div> Does alfredo sauce contain soy?</h2>

, а затем оформить его в моем файле CSS, например:

.q {
    padding-bottom: 15px;
    display: inline;
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}

Хотя это нормально отображается в моем браузере, при запуске страницы через http://validator.w3.org, он жалуется: «Элемент div не разрешен как дочерний элемент элемента h2 в этом контексте. (Подавление дальнейших ошибок этого поддерева.)»

Как бы я стилизовал этот фрагмент текста в допустимом HTML / CSS?

Answer 1

Вы можете использовать диапазон

<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>

, также удалить отображение: встроенный из класса

.q {
    padding-bottom: 15px;
    /*display: inline;*/
    font-size: 35px;
    font-weight: 700;
    color: #65A6D1;
}

Answer 2

DIV создает новый элемент блока. Это запрещено в h2 и многих других элементах. Вы можете создать встроенный элемент с помощью span.

<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>

Конечно, вам необходимо соответствующим образом изменить таблицу стилей.

Answer 3

Используйте тег <span> вместо <div>.<span> является встроенным элементом, а <div> является блочным элементом.

Answer 4

Используйте span вместо div внутри h2.

Answer 5

Вы можете сделать это:

<h2 id="q"><span>Q</span>Does alfredo sauce contain soy?</h2>

h2#q span {
padding-bottom: 15px;
display: inline;
font-size: 35px;
font-weight: 700;
color: #65A6D1;

}

Answer 6

div и h2 оба являются блочными элементами. Используйте span вместо div.

Например:

<h2><span class="q">Q:</span> Blammy blammo soy?</h2>

дополнительное примечание: [ненормативное описание] Некоторые элементы не любят содержать блочные элементы. Элементы header (h1, h2, ...) не любят содержать блочные элементы. «Не нравится»: спецификация говорит «не должен», я верю.