Порядок селектора в CSS - это способ, с помощью которого определяется приоритетность применения стилей к элементам веб-страницы. В CSS используется концепция каскадирования, которая позволяет задавать несколько стилей для одного элемента и определять, какой стиль имеет больший приоритет.
Приоритетность стилей определяется на основе специфичности селекторов, сочетаний селекторов и веса.
- Вес селектора:
- Универсальный селектор (*) имеет наименьший вес, так как применяется ко всем элементам на странице.
- Теги имеют вес ниже классов и идентификаторов, так как применяются ко всем элементам данного тега.
- Классы имеют вес выше тегов, так как применяются только к определенным элементам с соответствующим классом.
- Идентификаторы имеют наибольший вес, так как они уникальны для каждого элемента идентификатора.
- Сочетание селекторов:
- Если в селекторе используются несколько элементов (например, div p), то вес каждого последующего элемента увеличивается.
- Сочетание селекторов имеет больший вес, чем простой селектор (например, .my-class > .my-other-class имеет более высокий вес, чем .my-class).
- Приоритетность:
- Если два селектора имеют одинаковый вес, применяется тот, который был объявлен последним в коде CSS.
- Если есть несколько стилей с одинаковой специфичностью, применяется стиль, объявленный последним.
Примеры порядка селекторов:
- .my-class { color: red; } // класс .my-class
- div.my-class { color: blue; } // класс .my-class с тегом div
- #my-id { color: green; } // идентификатор #my-id
- #my-id .my-class { color: yellow; } // класс .my-class внутри идентификатора #my-id
- #my-id .my-class > p { color: orange; } // тег p внутри класса .my-class внутри идентификатора #my-id
Важно помнить, что хорошо структурированный и организованный CSS код упрощает понимание приоритетов и их применение.