В предыдущей части серии Каскадные таблицы стилей (CSS) 101 мы обсуждали, как обрабатывать несколько правил для элемента. В этой статье обсуждается еще одна важная функция CSS: селекторы, которые можно использовать для выбора элементов на странице для стилизации веб-страницы.
Тип селектора
Стили CSS имеют множество способов реализовать выбор элементов. Различные методы выбора включают в себя выбор с помощью универсального селектора, селектора типа, селектора класса, селектора идентификатора, селектора предка, селектора потомка, селектора соседнего родственного элемента и селектора атрибута.
Здесь мы рассмотрим каждый из этих методов по отдельности (за исключением соседних одноуровневых методов и атрибутов, которые мы обсудим на следующей неделе). Примечание. Поддержка браузерами селекторов CSS непостоянна, но вы можете воспользоваться онлайн-инструкциями, чтобы проверить, работает ли определенный селектор в вашем целевом браузере.
Универсальный
Универсальные селекторы позволяют использовать стили по всей странице. По сути, стиль не определяет конкретный элемент, класс и т. д., поэтому он применяется ко всем элементам на странице. Это полезно для настройки цветов, шрифтов и т. д.
Универсальные селекторы можно использовать для всех элементов на странице, но их можно переопределить конкретными селекторами. В спецификации CSS указано, что звездочка (*) может использоваться для обозначения универсального селектора. В листинге A показано, как использовать универсальные селекторы для установки фона и шрифта по умолчанию для страницы.
тип
Один из наиболее распространенных способов стилизации элемента — это его тип. Это означает, что конкретный элемент имеет свой собственный определенный стиль, и этот стиль можно использовать для всех элементов этого типа независимо от положения элемента на странице. Пример в листинге B демонстрирует использование селектора типа для стилизации всех элементов сегментов на странице.
При использовании этого типа селектора все элементы абзаца внутри листа (если они не переопределены более конкретными селекторами) имеют определенные поля и красный текст. Теперь вы также можете создавать свои собственные классы CSS для обработки стилей определенных элементов на странице.
добрый
Селекторы классов дают вам больше контроля, чем селекторы типов, когда дело доходит до принятия решения о том, что охватывает стиль. Стили, определенные селектором класса, можно применять ко всем элементам с атрибутом класса, независимо от положения элемента на странице. Он обеспечивает отличный контроль над тем, какие элементы получают стили. Пример в листинге C демонстрирует использование класса для форматирования только первого абзаца на странице. Итак, первый абзац имеет неровный шрифт, а следующие абзацы отличаются.
Селекторы классов не могут использовать зарезервированные элементы HTML, такие как заголовок, p, h1 и т. д. Вы также можете использовать несколько классов для одного и того же элемента, разделяя их пробелами. Листинг D демонстрирует использование нескольких классов для оформления определенного абзаца.
Вы можете комбинировать селекторы классов с селекторами типов, чтобы стилизовать определенные элементы, которым назначены классы. В этом сценарии при определении стилей имя элемента содержит имя класса, разделенное пробелами. Пример в листинге E демонстрирует метод, при котором только элементы сегмента, которым присвоено определенное имя класса, стилизуются одним способом, а заголовки с тем же именем класса стилизуются другим способом. Я остановлюсь более подробно на использовании атрибута ID элемента.