Почему в этом случае CSS ID не является правилом CSS с наивысшим приоритетом?

Question

Я создал заголовок CSS-навигации, и он работает именно так, как я хочу в отношении позиционирования, стилизации и всего такого. Это CSS, который стилизует его:

#header ul {
padding:72px 0 0 0;
text-align:center;
}

#header ul, #header ul li {
margin:0;
list-style:none;
}

#header ul li {
display:inline;
}

#header ul li a {
font-size:17px; color:#69C; text-decoration:none;
display:inline-block;
height:44px;
line-height:44px;
margin:3px 6px;
padding:0 26px;
}

#header ul li a:hover {
background:#69C;
color:#FFF;
}

И это список:

<div id="#header">
   <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">WHAT WE DO</a></li>
      <li><a href="#">ABOUT US</a></li>
      <li><a href="#" id="get_started">GET STARTED TODAY!</a></li>
   </ul>
</div>

Довольно простые вещи (в настоящее время доступны для просмотра на http://www.pmind.com/staging,, но я включил здесь код для потенциальных будущих читателей).

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

#get_started {
color:#3C0;
}

Ничего не происходит. Насколько я понимаю, A. Правила CSS, которые появляются позже в документе CSS, имеют приоритет над правилами, которые поступали раньше, и B. Правила CSS, используемые с селектором идентификаторов, имели наивысший приоритет, несмотря ни на что. Но ясно, что синяя окраска, исходящая из более ранних правил CSS, все еще имеет приоритет над окраской окончательного li зеленого. Я пытался убедиться в том, что я проявил должную осмотрительность, прибегая к поиску решения, но все, что я нахожу, говорит о том, что идентификаторы имеют наивысший приоритет (и это также было моим практическим пониманием всего, что я кодировал до этой проблемы). *

Answer 1

Если вы пытаетесь переопределить селектор, у которого у нет идентификатора с идентификатором, который у был , ваша ошибка быть на месте

Однако в этом случае вы используете #get_started (у которого есть идентификатор) для переопределения #header ul li a , в котором также есть идентификатор .

Конечно, вы думаете, что ваш ID более конкретен, чем #header ID - и вы не совсем не правы - но это не так, как работает CSS. Он заботится только о количестве идентификаторов, используемых в селекторе, а не о том, на какие элементы эти идентификаторы нацелены.

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

Если это одно и то же число (в этом случае оба имеют одно), переходите к числу классов. Опять же, если у одного есть больше классов, чем у другого, он побеждает, и все готово. В этом случае оба имеют нулевые классы.

Итак, мы переходим к количеству имен тегов. Еще раз, если у кого-то больше имен тегов, он побеждает. И здесь #header ul li a содержит три тега (ul, li и a), тогда как #get_started не имеет ни одного. Ты проиграл. Существующий селектор побеждает.

Вы можете обойти это, просто #header #get_started, у которого теперь есть два идентификатора, но я бы предпочел более четко описать это как:

#header ul li a#get_started

Answer 2

#header ul li a имеет более высокую специфичность, чем #get_started

Вы должны прочитать спецификации w3c по специфичность .

ИЗМЕНИТЬ, чтобы добавить:

Просто помните, что, хотя специфика обычно записывается в краткой форме как степени 10, 10 элементов никогда не будут более специфичными, чем один класс, а 10 классов никогда не будут более специфичными, чем один идентификатор.

E.X.

html body div table tbody tr td ul li a менее конкретен, чем .some-link-class

Answer 3

Оформление отличного видео:

Понимание специфики CSS

Answer 4

Вы пробовали?

#get_started:link {
    color:#3C0;
}

Answer 5

вы можете попробовать это

#get_started {
color:#3C0!important; // this will take the priority
}