Покорите продвинутые селекторы CSS

Автор：Eve Cole Время обновления：2009-09-07 21:27:44

Исходная статья: Освойте расширенные селекторы CSS
Переведено с:Укрощение расширенных селекторов CSS

CSS — один из самых мощных инструментов, доступных веб-дизайнерам. С его помощью мы можем изменить интерфейс сайта за несколько минут, не меняя теги страниц. Но несмотря на то, что каждый из нас осознает, что это полезно, селекторы CSS далеки от реализации своего потенциала, и иногда мы склонны использовать излишние и бесполезные классы, идентификаторы, элементы div, диапазоны и т. д. Наш HTML очень неряшлив.

Лучший способ избежать этих проблем в ваших тегах и сохранить их краткими и семантическими — использовать более сложные селекторы CSS, которые могут ориентироваться на определенные элементы без использования дополнительных классов или идентификаторов. Таким образом мы также можем сделать наш код и стили более гибкими .

Приоритет CSS

Прежде чем углубляться в область продвинутых селекторов CSS, важно понять, как работают приоритеты CSS, чтобы мы знали, как правильно использовать наши селекторы и не тратить много времени на отладку чего-либо, пока мы уделяем внимание приоритетам. Это было бы легко. решить проблему, если

Когда мы пишем CSS, мы должны помнить, что некоторые селекторы будут выше других селекторов в каскаде. Селектор, который мы пишем в конце, не обязательно будет переопределять стили, которые мы написали ранее для того же элемента.

Так как же вычислить приоритет данного селектора ? Это довольно просто, если учесть, что приоритеты выражаются четырьмя числами, разделенными запятыми, например: 1, 1, 1, 1 или 0, 2, 0, 1.

Первое число (a) обычно равно 0, если только в теге не используется атрибут style;
Второе число (b) — это сумма количества идентификаторов в селекторе;
Третье число (c) — это общее количество других селекторов атрибутов и псевдоклассов, используемых в этом селекторе. Сюда входят класс (.example) и селектор атрибутов (например, li[id=red]);
Четвертое число (d) подсчитывает элементы (например, table, p, div и т. д.) и псевдоэлементы (например, первую строку и т. д.);
Универсальный селектор (*) имеет приоритет 0;
Если два селектора имеют одинаковый приоритет, вступает в силу последний из них в таблице стилей.

Давайте рассмотрим несколько примеров, чтобы было легче понять:

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

В приведенном ниже примере первый из них будет работать, поскольку он имеет более высокий приоритет, чем второй:

#sidebar p#first {color: red } — 0, 2, 0, 1;
#sidebar p:first-line {color: blue } — 0, 1, 0, 2;

Важно иметь хотя бы базовое понимание того, как работают приоритеты, но некоторые инструменты, такие как Firebug, когда мы проверяем определенный элемент, перечисляют все пары селекторов CSS в порядке приоритета селекторов, чтобы мы знали, какой из них находится на конкретном элементе. полезно для того, чтобы селекторы были действительными.

Благодаря этому вам очень легко увидеть, какой селектор действует на элемент.

Полезные статьи: