1. Общие способы

а) *

Все теги.
Пример.
(универсальный селектор)




б) Тег

Все теги, имеющие указанное имя.
Пример.
(селектор типа)




в) .Класс

Все теги, имеющие указанный класс.
Пример.
(селектор класса)




г) Тег.Класс

Все теги, имеющие указанное имя и класс.
Пример.




д) .Класс.Класс

Мультиклассы. К десктриптору можно применить сразу несколько классов. В случае пересекающихся свойств браузером будет использовано то, которое описано последним (описано, а не упомянуто). Пересечение классов можно обрабатывать, как новый класс.
Пример.




е) #Идентификатор

Тег с указанным идентификатором.
Пример.




ё) Тег#Идентификатор

Идентификатор, указанный в теге с определённым именем. По сути польза такая же, как и при использовании предыдущего метода связывания, поскольку идентификатор в пределах документа уникален. Но при создании стиля веб-дизайнер, к примеру, может для себя или другого таким образом несколько уточнить местонахождение идентификатора.
Пример.
(селектор идентификатора)




ж) Тег1, Тег2

Сразу несколько тегов.
Пример.

2. По взаимному расположению
(контекстные или контекстуальные селекторы)

(примечание: специальный символ, обозначающий тип связи между элементами, называют комбинатором)

а) Тег1 Тег2

Все элементы, имеющие имя Тег2, расположенные где-то внутри элементов с именем Тег1. Очерёдность вложения тегов также важна.
Пример.
Наличие промежуточных контейнеров значения не имеет.
Пример 2.
(селекторы потомков)




б) Тег1 > Тег2

Все элементы, имеющие имя Тег2, являющиеся дочерними для контейнера с именем Тег1, т.е. без промежуточных контейнеров.
(Internet Explorer поддерживает данный способ начиная с версии 7.0.)
Пример.
(селекторы дочерних элементов)




в) Тег1 + Тег2

Все элементы, имеющие имя Тег2, которые следуют непосредственно за элементом с  именем Тег1.
(Internet Explorer поддерживает данный способ начиная с версии 8.0.)
Пример.
(селектор элементов-братьев)

3. Через привязку к атрибутам тегов
(селекторы атрибутов)

а) [атрибут]

Элементы, содержащие указанный атрибут.
Пример.
(простой выбор атрибута)




б) [атрибут='значение']

Элементы, у которых атрибут точно равен значению.
Пример.
(Наличие или отсутствие вокруг значения атрибута кавычек никакого значения не имеет.)
(точное значение атрибута)




в) [атрибут^='значение']

Элементы, у которых атрибут начинается с указанного значения.
Пример.




г) [атрибут$='значение']

Элементы, у которых атрибут оканчивается указанным значением.
Пример.




д) [атрибут*='значение']

Элементы, у которых атрибут содержит указанный фрагмент значения.
Пример.