1. Селектор типа. Что такое селектор типа? Относится к символу строки, который принимает в качестве имени существующий тип тега на веб-странице. Body — это тип тега на веб-странице, включая div, p и span.
Следующее:
тело {}
div {}
р{}
охватывать {}
2. Селектор группы.
Для объектов XHMTL один и тот же стиль может быть назначен группе одновременно.
Селекторы разделяются запятыми. Преимущество такого написания состоит в том, что один и тот же стиль нужно написать только один раз, что уменьшает объем кода и улучшает структуру кода CSS.
При его использовании обратите внимание, что «запятая» находится в режиме половинной ширины, а не в китайском режиме полной ширины.
Следующим образом:
h1,h2,h6,p,span
{
размер шрифта: 12 пикселей;
цвет:#FF0000;
семейство шрифтов: Arial;
}
3. Содержит селекторы для указания стилей для подобъектов в объекте, чтобы метод выбора играл роль.
Следует отметить, что эта настройка стиля действительна только для меток подобъектов этого объекта. Эта настройка стиля не применяется к другим подобъектам, которые существуют отдельно или расположены вне этого объекта.
Преимущество этого в том, что это помогает нам избежать чрезмерных настроек идентификатора и класса и напрямую определить необходимые элементы.
Следующим образом:
интервал h2
{
цвет:красный;
}
следующее:
тело h1 сильное
{
шрифт-вес: жирный;
}
4. Селектор id — это
селектор, который появляется по принципу объектной модели документа DOM. Для файла XHTML каждому тегу может быть присвоено имя в виде id="", но следует отметить, что в. файл XHTML. Идентификатор уникален и не может повторяться.
На веб-странице макета CSS div вы можете назвать ее для разных целей, например, заголовок для верхней части и нижний колонтитул для нижней части.
XHTML выглядит следующим образом:
#content
{
размер шрифта: 14 пикселей;
высота строки: 120%;
}
5. Селектор классов
Фактически, id — это расширение тегов XHTML, а class — это комбинация нескольких тегов SHTML. Буквальный перевод class означает класс или категорию.
Для тегов XHTML используйте class="" для присвоения имени. В отличие от идентификаторов, классы можно использовать повторно. Несколько элементов с одним и тем же стилем могут быть напрямую определены как класс.
Преимущества использования класса очевидны. Он отражает возможность повторного использования кода CSS. Многие теги могут быть определены с использованием стиля без написания кода стиля для каждого из них.
XHTML выглядит следующим образом:
.he
{
поле: 10 пикселей;
цвет фона: красный;
}
6. Селекторы, специфичные для тегов.
Если вы хотите одновременно использовать id и класс, а также одновременно использовать селекторы тегов, вы можете использовать следующий метод:
h1#content {}
/*Представляет все теги h1 с идентификатором в качестве содержимого*/
h1.p1 {}
/*Указывает все теги h1 класса p1*/
Точность селектора, специфичного для метки, находится между селектором метки и селектором идентификатора/класса, и это один из часто используемых селекторов.
7. Комбинированные селекторы.
Для всех вышеперечисленных селекторов используйте их в комбинации. Следующим образом:
h1 .p1 {}
/*Указывает все теги класса p1 под h1*/
#content h1 {}
Представляет все теги h1 в теге с содержимым идентификатора.
h1 .p1,#content h1 {}
/*Представляет все теги h1 под тегом h1 с классом p1 и все теги h1 под тегом с содержимым id*/
h1#контент h2{}
/*Тег h2 под тегом h1 с идентификатором в качестве содержимого*/
Селекторы CSS очень свободны и гибки. Вы можете использовать различные селекторы в соответствии с потребностями страницы, чтобы максимально структурировать и оптимизировать файл CSS.