В этом примере:
<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 = количество идентификаторов: 0
C = количество классов: 0< br> D = Количество элементов: 0
Таким образом, элемент входа имеет 3 коллизии, связанных с его цветом: a, #header a, #login
элемент (A, B, C, D)
a (0, 0, 0, 1) = 1
#header a (0, 1, 0, 1) = 101
#логин (0, 1, 0, 0) = 100
Селектор «#header a» выигрывает, потому что у него самый большой балл.
Но
Если мы изменим селектор "#login" на "a#login", мы получим:
a#login (0, 1, 0, 1) = 101
Селектор " #header a" проигрывает, потому что при ничьей побеждает последний, который был объявлен.
Итак, что я не могу понять:
Поскольку селектор «#header a» относится ко многим элементам, а селектор ID (например, #login) ссылается только на один элемент, логично, что мы хотим применить объявления селектора ID к этому элементу, верно? Я действительно не могу понять эту логику приоритета CSS, потому что я думаю, что селектор ID должен быть в основном наиболее конкретным из возможных, как и встроенные стили.
P.S.: Извините за мой плохой английский :)
