Введение в типы селекторов CSS
Типы CSS-селекторов используются для выбора контента, который мы хотим стилизовать. Он помогает в выборе элементов на основе их класса, идентификатора, типа и т. Д. Селектор CSS является компонентом набора правил CSS.
Типы CSS-селекторов
Для нас доступно 5 разновидностей CSS-селекторов. Мы рассмотрим следующие важные селекторы CSS:
- CSS Универсальный Селектор.
- Селектор элементов CSS.
- CSS Id Selector.
- CSS Class Selector.
- Селектор атрибутов CSS.
1. CSS Универсальный Селектор
На HTML-странице содержимое зависит от HTML-тегов. Пара тегов определяет конкретный элемент веб-страницы. Универсальный селектор CSS выделяет все элементы на веб-странице.
Пример:
* (
color: blue;
font-size: 21px;
)
Эти две строки кода, окруженные фигурными скобками, будут влиять на все элементы, присутствующие на странице HTML. Мы объявляем универсальный селектор с помощью звездочки в начале фигурной скобки. Универсальный селектор может использоваться вместе с другими селекторами в комбинации.
2. Селектор элементов CSS
Селектор элемента CSS также известен как селектор типа. Выбор элементов в CSS пытается сопоставить элементы HTML, имеющие одинаковые имена. Следовательно, селектор
- соответствует всем
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Шпаргалка CSS3
- CSS Интервью Вопросы
- SASS против SCSS
- SASS Интервью Вопросы
- Примеры упорядоченного списка HTML
- элементы, т.е. все неупорядоченные списки на этой странице HTML.
Давайте посмотрим на пример для селектора элемента.
ul (
border: solid 1px #ccc;
)
Чтобы лучше это понять, давайте рассмотрим пример кода HTML, чтобы применить код CSS, который мы написали выше.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Демо текст
В этом примере мы найдем в основном три элемента, а именно
- элемент, тег и другое
- элемент. Поскольку наш код CSS относится к
- пометить конкретно, изменения в границе будут делаться только для наших
- теги, а не для тегов. Обычно эти изменения не применяются к содержанию
- теги, но в некоторых сценариях стили могут применяться к внутренним элементам.
3. CSS ID Selector
Селектор идентификатора CSS помогает разработчику сопоставить идентификатор, созданный разработчиком, со своим стилевым контентом. Селектор идентификаторов используется с помощью знака хеш (#) перед именем идентификатора, объявленным разработчиком. Селектор идентификаторов сопоставляет каждый элемент HTML, имеющий атрибут идентификатора, со значением, аналогичным значению селектора, без знака хеша.
Вот пример:
#box (
width: 90px;
margin: 10px;
)
Этот код CSS можно использовать для соответствия элементу с идентификатором «box», как в следующем предложении.
Здесь тег является лишь примером. Мы можем написать атрибут ID для любого тега HTML. Селектор идентификаторов соответствует атрибуту идентификатора в элементе и ищет его стиль. В нашем примере стиль применяется до тех пор, пока любой элемент содержит атрибут ID «box».
Значение используемого идентификатора должно быть уникальным. Если один и тот же идентификатор используется для двух или более элементов, код технически недопустим, но стилизация элемента будет по-прежнему применяться, поэтому обычно избегают использования одного и того же идентификатора.
Необходимость использовать разные идентификаторы каждый раз для каждой HTML-страницы довольно жесткая. Помимо проблем с жесткостью, селекторы идентификаторов в CSS также сталкиваются с проблемой специфичности.
4. CSS Class Selector
Селектор класса CSS является одним из самых полезных селекторов из всех селекторов. Он объявляется с помощью точки, за которой следует имя класса. Это имя класса определяется кодером, как и в случае с селектором идентификатора. Селектор класса ищет каждый элемент, имеющий значение атрибута с тем же именем, что и имя класса, без точки.
Пример:
.square (
margin: 20px;
width: 20px;
)
Этот код CSS можно использовать для соответствия элементу, имеющему квадрат класса, как в следующем предложении.
Этот стиль также применяется ко всем другим элементам HTML, имеющим значение атрибута для класса как «квадрат». Элемент, имеющий такое же значение атрибута класса, помогает нам повторно использовать стили и избегает ненужного повторения. Кроме того, Селектор Класса полезен, потому что он позволяет нам добавлять несколько классов к определенному элементу. Мы можем добавить более одного класса к атрибуту, разделяя каждый класс пробелом.
Пример:
Здесь квадрат, жирный и форма три разных типа классов.
5. Селектор атрибутов CSS
Селектор атрибутов CSS стилизует содержимое в соответствии с атрибутом и значением атрибута, указанным в квадратных скобках. Перед открывающей квадратной скобкой не должно быть пробелов.
input(type="text") (
background-color: #fff;
width: 100px;
)
Этот код CSS будет соответствовать следующему элементу HTML.
Аналогичным образом, если значение атрибута type изменяется, селектор атрибутов не будет ему соответствовать. Например, селектор не будет соответствовать атрибуту, если значение «type» изменилось с «text» на «submit». Если селектор атрибута объявлен только с атрибутом и без значения атрибута, он будет соответствовать всем элементам HTML с атрибутом «тип», независимо от того, является ли значение «текст» или «отправить».
Пример:
input(type) (
background-color: #fff;
width: 100px;
)
Мы также можем использовать селекторы атрибутов без указания значения вне квадратных скобок. Это поможет нам ориентироваться только на атрибут, независимо от элемента. В нашем примере он будет нацелен на атрибут «тип», независимо от элемента «вход». Селекторы CSS помогают нам упростить наш код и позволяют нам использовать и повторно использовать один и тот же код CSS для различных элементов HTML. Они помогают нам в оформлении определенных сегментов и частей нашей веб-страницы. Они предоставляют нам возможность единообразного оформления похожих элементов на нашей веб-странице. Таким образом, селекторы CSS являются важной частью кривой обучения CSS.
Рекомендуемые статьи
Это было руководство по типам селекторов CSS. Здесь мы обсудили различные типы селекторов CSS с примером. Вы также можете просмотреть наши другие предлагаемые статьи, чтобы узнать больше -