Выборка элементов

Элементы в 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;
}

Также можно выбрать все объекты через селектор *, но это не рекомендуется делать из-за производительности.

* {}   /* выборка абсолютно всех элементов (не рекомендуется) */