Логотип Симфо

Селекторы используются для определения элементов HTML, к которым будут применяться стили, задаваемые конкретным селектором.

Основными селекторами являются селекторы типа, классы и идентификаторы.

Селекторы типа

Селекторы типа выбирают элементы по типу тега <div> <p> <ul> и т.п.
Например, что бы задать параметры для всех абзацев <p>, используем селектор p

p {...}

Селекторы классов

Селекторы классов выбирают группу элементов. Например, селектор .colorone выберет элементы, у которых атрибут class имеет значение colorone

<p class="colorone">

в стилях

.colorone {...}

Идентификаторы

Селекторы настроены на выбор конкретного элемент с указанным id

<div id="colortwo">


в стилях

#colortwo {...}

 

Комбинирование селекторов

Пример: в блоке красим все абзацы красным, а один зеленым. В нижеследующей записи на все абзацы распространяется класс color, а для одного дано пояснение, о том, что его следует красить в зеленый:

<div class="color">
   <p>...</p>
   <p>...</p>
   <p>...</p>
   <p class="color2">...</p>
</div>
.color p {background: red;}
.color p.color2 {background: green;}

Комбинация селекторов читается справа на лево Правый селектор — ключ, а левый — уточнение. Правый указывает к чему применяем, левый — где применяем.
Запись вида:

.color p .color2


предлагает выбрать элементы p и элементы с классом .color2 в блоке с классом .color

Запись вида

.color p.color2


предлагает выбрать только элементы p c классом .color2 в блоке с классом .color

Запись вида

.color .color2


предлагает выбрать любые элементы с классом .color2 в блоке с классом .color. Если селектор .color2 встречается только у элементов одного типа, то селектор типа p (как в предыдущем примере p.color2) можно и не указывать

Вес специфичности у комбинированных селекторов

Селекторам присваивается т.н. вес специфичности
Селектор типа имеет вес специфичности 0-0-1 — самый низкий.
Селектор класса имеет вес средний 0-1-0.
Селектор идентификатора имеет вес 1-0-0 — самый высокий.
Чем выше вес специфичности, тем больший приоритет отдается селектору при появлении конфликта стилей. Например, если стиль абзацу задается сначала селектором идентификатора, а затем селектором класса, то, следуя правилам каскада, свойство должно устанавливаться селектором класса. Но, поскольку вес специфичности у селектора идентификатора выше, то будет установлено свойство идентификатора
#pcolor {green}
.pcolor {red}
Посчитаем. 
У селектора .color p .color2 (или .color p.color2) вес специфичности 0-2-1 — два селектора класса и один типа.
У селектора .color .color2 вес специфичности 0-2-0 — здесь два селектора класса. 
Вес может быть и больше. 
Таким образом, напрашивается вывод — высокий вес специфичности может легко разрушать правило каскадности, которое является основой каскадной таблицы стилей. Следовательно не стоит злоупотреблять комбинированием стилей и по возможности разделять их по нескольким селекторам.