Ориентация на <small>в пределах <hX>

Question

У меня есть своего рода интересный предмет, на который я должен ориентироваться в CSS: это <small> внутри <h[1-6]>, который находится внутри <div> с классами alert-message и block-message.

В основном это выглядит так:

<div class="alert-message block-message">
    <h3>
        Hello World
        <small>And Hello Universe, too!</small>
    </h3>
</div>

Я пробовал:

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small

и

div.alert-message.block-message h1 small, h2 small, h3 small, h4 small, h5 small, h6 small

но, очевидно, ни одна из них не работает,Мне просто нужно изменить цвет шрифта этих конкретных <small> блоков.Что не так с моими подходами выше в "поиске" элементов?

Answer 1

Для того, чтобы нацелить их конкретно, ваш селектор должен быть таким:

div.alert-message.block-message h1 small,
div.alert-message.block-message h2 small,
div.alert-message.block-message h3 small,
div.alert-message.block-message h4 small,
div.alert-message.block-message h5 small,
div.alert-message.block-message h6 small {

}

Я всегда хотел, чтобы был общий селектор для h1-h6, но, к сожалению, нам нужно настроить таргетинг на них всех по отдельности.

Что не так с моими подходами, описанными выше в "поиске" элементов?

Помните, что запятые , разделяют селекторы, поэтому:

div.alert-message.block-message h1,h2,h3,h4,h5,h6 small {}

Это то же самое, что и

div.alert-message.block-message h1 {/* styles */}
h2 {/* styles */}
h3 {/* styles */}
h4 {/* styles */}
h5 {/* styles */}
h6 small {/* styles */}

Интересно, есть ли ярлык МЕНЬШЕ ?

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

div.alert-message.block-message {
    h1, h2, h3, h4, h5, h6 {
        small {/* your CSS */}
    }
}

Answer 2

запятая разделяет целые селекторы, а не части селекторов, как вы, вероятно, ожидаете.

div.alert-message h1,h2 означает, выберите div.alert-message h1 и выберите h2 (все из них)

вынужно написать

div.alert-message.block-message h1 small, div.alert-message.block-message h2 small, div.alert-message.block-message h3 small, div.alert-message.block-message h4 small, div.alert-message.block-message h5 small, div.alert-message.block-message h6 small

Answer 3

Назначьте каждое объявление в описании по одному.