CSS-селекторы используются для выбора элементов HTML, к которым нужно применить стили. Они позволяют выбрать один или несколько элементов по различным критериям, таким как id, class, тип элемента и т.д.
Вот несколько примеров CSS-селекторов:
- Выбор элемента по типу
p {
color: blue;
}
Этот селектор выбирает все элементы p на странице и применяет к ним синий цвет текста.
- Выбор элемента по классу
.my-class {
background-color: yellow;
}
Этот селектор выбирает все элементы с классом «my-class» и задает им желтый фон.
- Выбор элемента по id
#my-id {
font-size: 20px;
}
Этот селектор выбирает элемент с идентификатором «my-id» и задает ему размер шрифта 20px.
- Сочетание класса и типа
h2.my-class {
color: red;
}
Этот селектор выбирает все h2 элементы с классом «my-class» и задает им красный цвет текста.
- Выбор элемента по атрибуту
a[target="_blank"] {
text-decoration: none;
}
Этот селектор выбирает все ссылки (a элементы), у которых атрибут target равен «_blank», и убирает у них подчеркивание.
- Селектор потомка
div p {
font-style: italic;
}
Этот селектор выбирает все p элементы, которые являются потомками или находятся внутри div элементов, и задает им курсивное начертание.
Эти примеры показывают лишь небольшую часть возможностей CSS-селекторов. Они имеют множество вариаций и комбинаций, которые позволяют создавать гибкие и универсальные стили. Поэтому, изучение CSS-селекторов — это важная часть при изучении CSS и создании веб-сайтов.
