CSS селекторы
Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.
К простым селекторам относятся:
Составной селектор — это последовательность простых селекторов, которые не разделены комбинаторами, т. е. за одним селектором сразу идёт следующий. Он выбирает элемент, который соответствует всем простым селекторам, которые он содержит. Селектор типа или универсальный селектор, входящий в составной селектор, должен быть расположен первым в этой последовательности. В составном селекторе допустим только один селектор типа или универсальный селектор.
Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.
Список селекторов — это селекторы, перечисленные через запятую.
Комбинаторы
Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.
| Комбинатор | Пример | Описание | CSS | |||
|---|---|---|---|---|---|---|
| элемент элемент | div span | Выбор всех элементов внутри , которые расположены сразу после элементов ol | Выбор всех элементов
Псевдо-классыПсевдо-класс – это простой селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом. , который является первым дочерним элементом своего родителя. | 2 | ||
| :lang(язык) | p:lang(ru) | Выбор каждого элемента , который является первым из элементов своего родительского элемента. | 3 | |||
| :last-of-type | p:last-of-type | Выбор каждого элемента , который является последним из элементов своего родительского элемента. | 3 | |||
| :only-of-type | p:only-of-type | Выбор каждого элемента , который является единственным элементом своего родительского элемента. | 3 | |||
| :only-child | p:only-child | Выбор каждого элемента , который является единственным дочерним элементом своего родительского элемента. | 3 | |||
| :nth-child(n) | p:nth-child(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента. | 3 | |||
| :nth-last-child(n) | p:nth-last-child(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 | |||
| :nth-of-type(n) | p:nth-of-type(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента. | 3 | |||
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбор каждого элемента , который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента. | 3 | |||
| :last-child | p:last-child | Выбор каждого элемента , который является последним элементом своего родительского элемента. | 3 | |||
| :root | :root | Выбор корневого элемента в документе. | 3 | |||
| :empty | p:empty | Выбор каждого элемента Псевдо-элементыПсевдо-элемент – это виртуальный элемент, который не существует в явном виде в дереве элементов документа. Псевдо-элементы используются для выбора тех частей элемента, которые не могут быть выбраны с помощью других селекторов, а также для стилизации не всего элемента, а отдельных его частей. Селекторы CSSВ CSS-селекторы используются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
Что такое селекторы?Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля. В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах. Несколько селекторовА могу написать короче — просто отделив селекторы запятыми: Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки: В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же. При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено. В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован. Типы селекторовПонимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов. Селекторы тегов, классов и идентификаторовК этой группе относятся селекторы HTML-элементов, таких как К группе относятся и селекторы классов: или селекторы идентификаторов (ID): Селекторы атрибутовЭта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента: или основываясь на значении атрибута: Псевдоклассы, псевдоэлементыК группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца в нашем случае), действуя, как если бы тег оборачивал первую строку, а затем был стилизован. КомбинаторыИ последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ): ПродолжениеНиже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов. Справка о селекторахВ таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами. Селекторы CSS. Виды, группировка и специфичностьНа этом уроке мы изучим основные виды селекторов, и научимся их использовать на практике. Что такое CSS селекторыСелекторы — это один из фундаментальных механизмов CSS. Именно они определяют то, к каким элементам будут применены стили, указанные в фигурных скобках. Пример CSS правила: В CSS очень много различных типов селекторов. Используя один из них или комбинацию из нескольких можно очень точно применить стили к нужным элементам. Базовые селекторыК базовым селекторам можно отнести селектор по классу, тегу, идентификатору, атрибуту и универсальный селектор. Селектор по элементу (тегу)Селектор по элементу предназначен для выбора элементов по имени тега. Пример задания правила для всех элементов p на странице: Селектор по классуСелектор по классу предназначен для выбора элементов по классу (значению атрибута class ). Пример задания правила для всех элементов, имеющих класс center : Селектор по идентификатору (id)Селектор по идентификатору предназначен для выбора элемента по идентификатору (значению атрибута id ). Пример задания правила для элемента, имеющего в качестве значения атрибута id значение footer : Универсальный селекторУниверсальный селектор (селектор звёздочка) предназначен для выбора всех элементов. Пример задания правила для всех элементов на странице: CSS селекторы по атрибутуСелекторы по атрибуту предназначены для выбора элементов по имени атрибута и (или) его значению. Типы селекторов по атрибуту: =value] – по имени атрибута и значению, которое содержит value отделённое от других с помощью пробела. [attr]Пример задания правила для всех элементов на странице, имеющих атрибут target : [attr=value]Пример задания правила для всех элементов на странице, имеющих атрибут rel со значением nofollow : [attr^=value][attr|=value][attr$=value][attr*=value]ПсевдоклассыПсевдоклассы предназначены для более точного выбора элементов в зависимости от их динамического состояния или расположения. С помощью них можно, например, установить стили элементу при поднесении к нему курсора или стилизовать элемент в зависимости от того какой он имеет порядковый номер. Псевдоклассы для выбора элементов в зависимости от их состоянияПсевдоклассы :link и :visited предназначены исключительно для ссылок (элементов a с атрибутом href ). Псевдокласс :linkПсевдокласс :link предназначен для выбора не посещённых ссылок. Псевдокласс :visitedПсевдокласс :visited предназначен для выбора посещённых ссылок. Псевдокласс :activeПсевдокласс :active предназначен для выбора элементов в момент когда они активируются пользователем. Например, когда пользователь нажал левой кнопкой мышкой на ссылку, но её ещё не отпустил. В основном данный класс применяется для ссылок ( a ) и кнопок ( button ), но может также использоваться и для других элементов. Пример задания CSS правила для всех элементов a когда они активируются пользователем: Псевдокласс :hoverПсевдокласс :hover предназначен для выбора элементов при поднесении к ним курсора (при наведении на них). Если CSS-правила расположить в другом порядке, то часть из них могут не работать. Псевдокласс :focusПредназначен для выбора элемента, который в данный момент находится в фокусе. Например, данное состояние может активироваться когда мы кликаем мышью в текстовое поле или переходим в него с помощью клавиши tab на клавиатуре. Пример задания CSS правила для элемента input[type=»text»] при нахождении его в фокусе: По расположению среди соседейПри выборе элементов можно дополнительно с помощью псевдоклассов задать условие (фильтр) по их расположению (порядковому номеру) в родителе. Псевдокласс :first-childПсевдокласс :first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя. Пример задания CSS правила для элементов li являющимися первыми дочерними элементами своего родителя: Псевдокласс :last-childПсевдокласс :last-child применяется для выбора элементов, которые являются последними дочерними элементами своего родителя. Псевдокласс :only-childПсевдокласс :only-child используется для выбора элементов, если они являются единственными дочерними элементами внутри родительского контейнера. Псевдокласс :nth-child(выражение)Псевдокласс :nth-last-child(выражение)Псевдокласс :nth-last-child() выполняет те же действия что и :nth-child() за исключением того, что отсчет элементов в родителе вёдется не с начала, а с конца. В псведоклассе :nth-last-child(выражение) в качестве выражения можно использовать те же вещи, т.е. число, формулу, или ключевые слова odd или even По расположению среди соседей с учётом типа элементаПсевдокласс :first-of-typeПсевдокласс :last-of-typeДанный псевдокласс предназначен для выбора элементов, которые являются последними дочерними элементами данного типа своего родителя. Псевдокласс :only-of-typeПсевдокласс :only-of-type применяется для выбора элементов, если каждый из них являются единственным дочерним элементом данного типа внутри своего родителя. В отличие от :only-child псведокласс :only-of-type работает аналогично, но с учётом типом элемента. Псевдокласс :nth-of-type(выражение)Данный псевдокласс предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа. Псевдокласс :nth-last-of-type(выражение)Псевдокласс :nth-last-of-type(выражение) аналогичен классу :nth-of-type(выражение) с разницей в том, что отсчёт дочерних элементов ведётся с конца. Псевдоклассы для элементов формПсевдокласс :checkedПсевдокласс :enabledПсевдокласс :enabled предназначен для выбора включенных элементов формы, с которыми пользователь может взаимодействовать, например, нажать на него или внести текст. Пример, в котором установим для всех включенных элементов input фон: Псевдокласс :disabledЭлементы формы могут кроме включенного состояния находиться ещё в отключенном. Псевдокласс :disabled предназначен для выбора отключенных элементов формы, т.е. элементов с которыми пользователь в данный момент не может взаимодействовать. Например, выберем все отключенные элементы input : Остальные псевдоклассыПсевдокласс :not(селектор)Псевдокласс :not() предназначен для выбора элементов, которые не содержат указанный селектор. Пример CSS селектора для выбора элементов, которые не содержат некоторый класс: Псевдокласс :emptyПсевдокласс :empty предназначен для выбора пустых элементов (т.е. элементов, у которых нет дочерних узлов, в том числе текстовых). Селектор div:empty выберет все пустые элементы div на странице. Псевдокласс :rootПрименять :root можно например для объявления CSS переменных: Псевдокласс :targetПсевдокласс :target предназначен для выбора элемента, идентификатор которого соответствует хэшу в URL-адресе. Группировка селекторовДля задания правил нескольким селекторам одновременно их необходимо перечислить через запятую. Пример задания правила для всех элементов h3 и h4 на странице: Комбинирование селекторовВ CSS селекторы можно комбинировать. Осуществляется это очень просто, посредством последовательного их записывания, без использования пробела. Пример селектора для выбора элементов, которые имеют одновременно два класса: Пример селектора для выбора элементов, которые имеют указанный класс, атрибут, и является первым дочерним элементом в своём родителе: Селекторы отношенийВ HTML документе каждый элемент всегда связан с другими элементами. Виды отношений между HTML элементами: Более наглядно про отношения элементов приведено на рисунке. На этом рисунке отношения рассмотрены относительно элемента выделенного синим цветом. В CSS имеется 4 вида селекторов отношений. Первые два из них X Y и X > Y относятся к вложенным селекторам. Они предназначены для поиска элементов в зависимости от их нахождения внутри других. Остальные два X + Y и X Y являются CSS селекторами для выбора соседних элементов. Эти селекторы называют составными или комбинацией селекторов. Так как они на самом деле состоят из нескольких селекторов, разделённых между собой с помощью специальных символов (комбинаторов). Всего различают 4 символа: пробел, знак > (больше), знак + и Селектор X Y (для выбора вложенных или дочерних элементов)Селекторы X Y называют контекстными или вложенными. Селектор X > YСелектор X + YСелектор XПриоритет селекторовКогда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу, приоритетным из них является то, в котором селектор имеет большую специфичность (вес). При этом сравнение селекторов по весу нужно выполнять слева направо. Если первая цифра одного селектора больше, чем у другого, то он является более специфичным и к элементу будет применяться CSS-свойство, заданное в нём. Если цифры равны, то выполняем сравнение следующих цифр селекторов и т.д. Если у сравниваемых селекторов все цифры равны, то будет применяться тот, который ниже из них расположен по коду. Как считать эти цифры? Каждый селектор в зависимости от типа имеет вес: Каких селекторов нет в CSSВ CSS нет селектора для получения родительского элемента. Этот селектор может появиться в новой спецификации CSS, но в CSS3 так выбрать элемент нельзя. CSS-селекторы: Способы задавать CSS-стили для HTML-элементовВсем привет, с вами Сергей Никонов и в этой статье я расскажу про CSS-селекторы и как с помощью них задавать CSS-стили для вашего сайта. Мы рассмотрим различные способы и правила, как с помощью CSS-селекторов задавать стили для HTML-страницы. Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов. Только на сайте FructCode вы можете найти актуальных версии моих курсов! Что такое CSS-селекторы (CSS Selectors)На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы. Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементовКстати, не забудь подписаться на наш YouTube канал FructCode, где вы можете найти много полезных обучающих видео о верстке сайтов. Универсальный CSS-селектор * (звездочка)С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам. Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов. See the Pen BaWqwVm by Sergey Nikonov (@sergey-nikonov) on CodePen. В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный. Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному. И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов. При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров. CSS-селекторы по классу (Class selectors)С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class. Простой пример CSS-селектора по классу: Запись CSS-стилей через точку «.» и без пробеловА запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к Запись CSS-стилей через запятую «,»Запись CSS-стилей через пробел (space)А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности. Еще один пример для лучшего понимания как задать CSS-стили с помощью CSS-селекторов, когда вы пишите стили через пробел. Мы можем задать внутри
Запись CSS-стилей через знак больше «>»При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу. Лучше понять как работает комбинатор “>” вам поможет пример. Этот стиль применится только для первого потомка (child), но не будет работать для последующих: Запись CSS-стилей через знак “» можно выбирать все HTML-элементы, которые являются потомками указанного элемента. Пример как с помощью записи CSS-стилей со знаком “ Запись CSS-стилей через знак плюс «+»Если c помощью записи CSS-стилей со знаком “ » можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент. И вот простой пример: Запись CSS-стилей для HTML-элемента по атрибутуИмея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить и мы можем задавать CSS-стили исходя из атрибута. Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для с разными type: text и password. Когда мы будем печатать текст в с типом text мы хотим задать цвет текста «green», а для с типом password мы хотим задать цвет текста «magenta». И с помощью CSS-селекторов по атрибуту мы можем это сделать: Для HTML-элементов можно задавать атрибуты, которые мы можем и сами придумать. Атрибуты задаются для различных целей, когда нужно запрограммировать определенное поведение. И мы им также может задавать CSS-стили: ВыводТакже рекомендуем подписаться на наш YouTube канал FructCode, где переодически появляются полезные материалы для обучения верстке сайтов и программированию. С вами был Сергей Никонов, успехов в обучении! Что такое селектор в CSSВ этой статье мы рассмотрим способы определения стилей веб-страницы с помощью селекторов классов, селекторов потомков, псевдоклассов и селекторов идентификаторов. НастройкаСелекторы классовМожно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса: Теперь стилизуем абзац в файле CSS с помощью следующего кода: Это правило применяется только к элементам с соответствующим атрибутом класса. Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов: Конвенция имен классовБолее полезные divАтрибут class применяется не только к элементам Конечно, для этого нам нужен соответствующий атрибут класса. Измените Данный код позволяет использовать стили и для других элементов, а не только для кнопок. Дивы контейнеровПопробуем создать макет фиксированной ширины с использованием метода автополей. Сначала оберните весь документ в Независимо от того, как будет изменяться размер окна браузера, веб-страница всегда будет иметь ширину 600 пикселей и выравниваться горизонтально по центру доступного пространства. Обратите внимание, что то же самое мы раньше делали для кнопки, но теперь мы делаем это с несколькими элементами одновременно, вложив их в общий контейнер: Именно таким образом определяются более сложные макеты веб-страниц. Например, если на нашей странице была бы боковая панель, мы бы вложили все ее элементы в другой Без CSS селекторов атрибутов классов, которые позволяют дифференцировать элементы Повторное использование стилей классовВ результате этого мы получим вторую кнопку, которая выглядит так же, как и первая. Это значительно упрощает работу веб-разработчиков. Если мы когда-нибудь захотим изменить цвет кнопки, нужно будет сделать это только в одном месте, и все наши кнопки автоматически обновятся: Изменение стилей классовМы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки. Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы: Порядок имеет значениеХочу обратить ваше внимание на две важные вещи, касающиеся нашей второй кнопки: Другими словами, следующие элементы эквивалентны: Селектор потомковДобавление этого правила в файл styles.css задаст отображение вертикальными ( римскими ) символами, тем самым определяя разницу с курсивным шрифтом, которым отображается весь абзац . При этом остальных элементов , размещенных на странице это изменение не коснется: Селекторы потомков не ограничиваются селекторами классов. Таким образом, можно комбинировать любую другую группу селекторов. Например, если нужно выбрать только элементы внутри заголовков: Не переусердствуйтеМожно вложить CSS селектор потомков настолько глубоко, насколько нужно, но не увлекайтесь. Все становится запутанно, когда вы начинаете писать правила, которые выглядят так: Эти стили нельзя будет повторно использовать, поскольку они соответствуют только следующей структуре HTML : Если захотите применить эти стили к заголовку , который не был обернут в тегПсевдоклассы для ссылокОсновные стили ссылокВ отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются: Состояние visited hoverДобавьте это правило ниже предыдущего фрагмента кода: Состояние visited activeЭти два последних раздела позволят задавать стили посещенных ссылок полностью отдельно от не посещенных. Псевдоклассы для кнопокЭлемент ссылки, а не элемент divЕсли вы перезагрузите документ в браузере, то увидите, что некоторые стили больше не действуют. Хотя мы используем одни и те же классы. Это связано с тем, что является встроенным элементом, а также имеет значение цвета по умолчанию: Нам нужно снова сделать этот элемент блочным и удалить часть стилей ссылок по умолчанию. Стили кнопокОбратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы. Теперь оформим состояние при наведении курсора. Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active : Другая кнопкаПсевдоклассы для структурыЭто позволяет не затрагивать первые два элемента на странице, не добавляя для последнего абзаца новый атрибут класса: Использование этого метода вместо устаревших классов имеет свои преимущества и недостатки. Например, это работает только в том случае, если наш синопсис является элементом . Если бы мы захотели создать синтаксис с несколькими параграфами, объединив много элементов ПредостереженияНо псевдоклассы немного сложнее. Контекстные селекторы CSS first-of-type и last-of-type действуют только внутри своего родительского элемента. Другими словами, p:first-of-type выбирает первый элемент в каждом элементе контейнера. У нас есть один общий Это иллюстрирует сложность применения псевдоклассов для структуры. Первый элемент Если вы не хотите затрагивать абзацы в боковой панели, и выбрать только первый Селекторы идентификаторовCSS селекторы идентификаторов – альтернатива селекторам классов. Они работают почти так же, но на странице может размещаться только один элемент с определенным идентификатором. Это означает, что вы не сможете повторно использовать стили. Соответствующий селектор CSS должен начинаться с символа хэша ( # ). Добавление следующего кода в файл styles.css изменит цвет текста желтой кнопки: По этой причине использовать CSS селекторы идентификаторов обычно не рекомендуется. Вместо этого используйте селекторы классов. Фрагменты URL-адресовАтрибуты id должны быть уникальными, поскольку на них указывают « фрагменты URL-адресов ». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса : Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой: Специфичность CSSПорядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом: Но не все селекторы CSS равнозначны. « Специфичность CSS » — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей. Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной: Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием « BEM ». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем. ЗаключениеПожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки! Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, лайки, отклики, дизлайки, подписки огромное вам спасибо! |




















