Выборка элементов
Элементы в CSS, с помощью которых выбираются HTML-объекты, называются селекторы.
a {} /* выборка только ссылок */ a,p {} /* выборка ссылок и абзацев */ .one {} /* выборка всех элементов с классом one */ .one.two {} /* выборка всех элементов с двумя классами: one и two */ #id {} /* выборка элемента по атрибуту id */ #id p {} /* выбрать абзацы внутри элемента #id */
Различия классов и id в том, что одинаковое значение классов можно присвоить нескольким элементам, а значение id можно присвоить только одному элементу (т.е. не могут быть несколько элементов с одинаковым id).
Стоит избегать большой вложенности селекторов, т.к. это влияет на производительность сайта.
/* не рекомендуется, большая вложенность */ .page .item .title a {} /* можно сократить */ .page .item a {}
Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item
.
Об этом также написано в официальной документации разработчиков браузера Firefox (на английском): developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirect=no#How_the_Style_System_Matches_Rules
Рекомендуется делать выборку по классам вместо id, т.к. секелекторы с id имеют больший вес, чем у классов, и их сложно будет переопределить.
#modal a { color: blue; } /* цвет ниже не получится переопределить, т.к. #modal имеет больший вес, чем у классов */ .modal-header a { color: #333; } /* в этом случае придётся добавить #modal */ #modal .modal-header a { color: #333; }
Также можно выбрать все объекты через селектор *
, но это не рекомендуется делать из-за производительности.
* {} /* выборка абсолютно всех элементов (не рекомендуется) */
Авторизуйтесь, чтобы добавлять комментарии