Селектор CSS — это основа макета нашей веб-страницы CSS. Что такое селекторы CSS и как их разумно использовать? Селекторы можно разделить на три категории. За исключением первой категории селектора HTML, мы можем назвать две другие категории самостоятельно. При именовании обратите внимание на семантику или добавьте необходимые комментарии, чтобы сделать наш код более понятным и легким для чтения. .
Селектор тегов HTML-селектора
Селектор HTML — это тег HTML, например: DIV, TD, P, H1 и т. д. Если вы определите их с помощью CSS, свойства этого тега на странице, управляемой статьей CSS, будут отображаться в соответствии с вашим определением.
Например, если мы хотим, чтобы цвет H1 был красным, тогда: H1 {color: red}. Здесь мы узнаем об особенности CSS, которая позволяет определять в правиле несколько селекторов. Например: H1, H2, TD {цвет: красный}. Это определение позволяет всем H1, H2 и TD быть красными. При конкретном использовании несколько атрибутов с одинаковыми настройками можно объединить и записать для сокращения нашего кода.
Селектор класса Селектор класса
Существует два типа селектора классов. Один из них называется селектором связанного класса и связан с тегом HTML. Его синтаксис — tag.Classname {свойство:значение}. Например: мы хотим установить красный цвет для некоторых, но не для всех H1. H1.redone {color: red}: первый H1 красный, а второй — нет.
Второй тип — независимый селектор классов. Его можно использовать с любым HTML-тегом. Его синтаксис следующий: Имя класса {свойство: значение} Если у нас есть следующее определение blueone {color: blue}, мы можем применить его к различным тегам. Совершенно очевидно, что селектор классов дает нам больше свободы и возможностей для игры.
Селектор идентификатора Селектор идентификатора
Фактически, функция селектора идентификатора очень похожа на функцию селектора независимого класса. Разница в том, что их синтаксис и использование различны, и они помогают JavaScript манипулировать элементами HTML. В нашем макете мы часто используем селекторы идентификаторов для определения различных структурных областей.
Его синтаксис следующий: #IDname {свойство:значение}. Предположим, у нас есть следующее определение #yelowone {цвет: желтый}. Мы можем применить это определение к любому тегу с тем же идентификатором, например: text here. Вы можете подумать, что, поскольку селектор идентификатора выполняет ту же функцию, что и селектор независимого класса, почему существуют оба? HTML-элементами с идентификаторами можно манипулировать с помощью JavaScript.