Логика приоритетов CSS
В этом примере:
<style>
/* Default links */
a {
color: #0F0; /* Green */
}
/* Header links */
#header a {
color: #F00; /* Red */
}
/* Login link */
#login {
color: #00F; /* Blue */
}
</style>
<header id="header">
<p><a href="#">header link</a> is red</p>
<p><a id="login" href="#">login link</a> is not blue</p>
</header>
Не логично, что ссылка для входа должна быть синей?
Я знаю, что декларации имеют одинаковое происхождение и одинаковую важность, поэтому их нужно оценивать (специфика селектора).
Чтобы рассчитать специфичность селектора, я создал таблицу для каждого селектора:
A = Количество встроенных стилей: 0
B = номер ID: 0
C = Количество классов: 0
D = количество элементов: 0
Таким образом, элемент входа в систему имеет 3 коллизии, связанные с его цветом: a, #header a, #login
элемент (A, B, C, D)
а (0, 0, 0, 1) = 1
#header a (0, 1, 0, 1) = 101
#login (0, 1, 0, 0) = 100
Селектор "#header a" побеждает, потому что он набрал наибольшее количество очков.
Но
Если мы изменим селектор "#login" на "# login", у нас будет:
# логин (0, 1, 0, 1) = 101
Селектор "#header a" проигрывает, потому что при ничьей выигрывает последний, который был объявлен.
Итак, вещь, которую я не могу понять, это:
Поскольку селектор "#header a" ссылается на множество элементов, а селектор идентификатора (например, #login) ссылается только на один элемент, логично, что мы хотим применить объявления селектора идентификатора к этому элементу, верно? Я действительно не могу понять эту логику приоритета CSS, потому что я думаю, что селектор идентификатора должен быть в основном наиболее конкретной вещью, как и встроенные стили.
PS: извините за мой плохой английский:)
6 ответов
Вы не можете видеть "специфичность" в том смысле, в каком селектор нацелен на наименьшее количество элементов, а просто на то, что наиболее важно.
Конечно, правила могли бы быть еще более усложнены, если различать такие вещи, как #header a или же a#login, Однако это только добавит путаницы всей системе.
Также наиболее вероятно, что это (з / ш) может быть использовано как следующее: header#header a - это добавило более высокую специфичность, но также может быть нацелено на большее количество элементов.
На мой взгляд, это не добавит никакой дополнительной ценности системе, а только усложнит ее.
При написании CSS всегда следует стараться, чтобы правила были как можно короче из-за проблем с производительностью. Если вам нужно перезаписать правило, у вас все еще есть возможность добавить другое id или же class - в дополнение к обычному каскадированию этого действительно более чем достаточно.
Нет, по логике селекторов это не так.
#header a более конкретно, чем #login, Если вы уменьшили #header a селектор для #headerтогда селектор заголовка и селектор входа в систему будут иметь одинаковую специфику, и будет использовано правило, которое было выражено в последний раз (в вашем порядке - цвет от имени входа). То же самое было бы верно, если бы вы увеличили специфичность селектора входа в систему, добавив к нему имя тега.
Похоже, вы знакомы с концепцией специфичности, которая подробно описана как часть спецификаций w3 css. С точки зрения алгоритма, значения специфичности селектора в объявлении правила являются плоскими или непозиционными. Это означает, что #header a а также a#login имеют одинаковую специфику, что означает, что если элемент подходит для обоих правил, последнее будет иметь приоритет.
Лично мне потребовалось гораздо больше времени, чтобы прийти к согласию с селекторами, имеющими семантическую специфику, но не имеющими калькуляционной ценности. Например, ul li а также ul>li имеют тот же вес, хотя последний "чувствует" более конкретным!
Я считаю, что любому, кто имеет опыт функционального программирования, легче сравнивать специфичность с четырехбайтовыми значениями (это на самом деле близко к тому, как это реализовано в основных браузерах - следовательно, переполняется значение при использовании более 256 селекторов одинакового веса:)
OP, возможно, вы могли бы подумать, что CSS сначала обрабатывает первый аргумент (#header и #login) и только после этого обрабатывает второй аргумент (a в "#header a").
Таким образом, в первом процессе он становится красным, а затем синим, но во втором процессе он перезаписывается красным, из-за "а" во втором аргументе.
Это зависит только от специфики - будьте более конкретны, и это будет работать для вас:
header a#login {
color: #00F; /* Blue */
}
Все, что нужно, чтобы исправить это меняется #login в a#login сообщить DOM, что эта команда относится только к ссылке.
#header a более конкретно, чем просто #login потому что он указывает на конкретный элемент в DOM, а не просто на случайный идентификатор.