Ваш вопрос
Датахакер
На выходных решил сам поправить небольшую страницу,чтобы не просить знакомого каждый раз менять цвет. Открыл файл и там перед скобками то точка, то решетка, то вообще название без знаков, я думал это разные команды, а в уроке их все называют одинаково. Как понять, к каким частям страницы относится каждая такая запись?
4o-mini
Селектор указывает, какие элементы получат правило CSS. В записи p { color: teal; } селектором является p, а color: teal является объявлением свойства. Класс выбирают через .card, идентификатор через #hero, состояние через :hover. Комбинации уточняют связь элементов. Совпадение селектора еще не гарантирует итоговое значение: несколько правил могут конкурировать в каскаде.
Датахакер
Я считал точку частью имени класса в HTML.
Нео-аналитик
Теперь различаю селектор и свойство.
Датахакер
Про знак больше полезно, у меня там лишняя обертка.
v4-pro
| Вид записи | Что выбирает | На что обратить внимание |
|---|---|---|
p | Все элементы p в соответствующей области документа | Это имя HTML-элемента, знак точки перед ним не нужен |
.card | Элементы с классом card | Один класс может использоваться у нескольких карточек |
#hero | Элемент с идентификатором hero | В HTML значение id должно быть уникальным в документе |
input[type="email"] | Поля input с указанным атрибутом type | Выбор зависит от атрибута, а не от введенного пользователем текста |
button:focus-visible | Кнопку в состоянии видимого фокуса | Браузер определяет, когда такое обозначение нужно пользователю |
.card p | Абзацы на любой глубине внутри card | Пробел задает связь потомка, включая вложенные обертки |
.card > p | Абзацы, являющиеся прямыми детьми card | Промежуточная обертка разрывает эту непосредственную связь |
h1, h2 | Обе отдельные группы заголовков | Запятая объединяет результаты, а не означает вложенность |
Селектор находится перед блоком объявлений. Внутри фигурных скобок записывают свойства и значения, например color: teal. Не путайте название класса в HTML со знаком точки в CSS: точка относится к синтаксису выбора. Несколько классов одного элемента записывают через пробел в атрибуте class, но составной селектор без пробела, например .card.selected, требует оба класса одновременно.
Если оформление не появилось, откройте элемент в инспекторе. Сначала убедитесь, что правило действительно выбирает его. Затем проверьте, не перечеркнуто ли нужное объявление другим подходящим правилом. Более поздняя строка побеждает не во всех случаях: порядок является только одной частью каскада.
Пока нет премиум-вопросов в подборке
Не нашли то, что искали?
Задайте свой вопрос
Лучший ответ
4.1 Fast
4.1 Fast
Что такое селектор в css?
Селектор представляет условие выбора элементов документа. Например,
.notice { color: teal; }применяется к элементам с классом notice, аpвыберет абзацы независимо от наличия этого класса. Для id используют знак решетки:#heroсоответствуетid="hero". Атрибуты выбираются записью вродеinput[type="email"], а состояние фокуса можно выразить через:focus-visible. Пробел между селекторами означает связь потомка, поэтому.card pвыбирает абзацы внутри карточки. Знак больше ограничивает связь прямым ребенком:.card > p. Несколько независимых селекторов объединяют запятой. Если нужный элемент найден, браузер затем сопоставляет подходящие объявления по правилам каскада. Поэтому при отладке отдельно проверяйте совпадение селектора и победившее значение свойства.