Понимание селекторов CSS

Question

Почему нижеследующее делает текст красным?

#stories li a {color:red}
.default li.expand a {color:green}
li.expand a {color:blue}

---

<ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>

Только если я добавлю #stories на другие, текст изменится. Есть ли у # больше доминирования, хотя он и дальше по сравнению с CSS?

Answer 1

Это вопрос "CSS Specificity". Статья Энди Кларка CSS: Spcificity Wars довольно хорошо объясняет это с небольшим юмором. Хотя Эрик Мейер добавляет больше ясности в его комментарий .

Answer 2

Согласно http://htmldog.com/guides/cssadvanced/specificity/, '#' (селектор идентификатора) обладает наивысшей специфичностью, так что да, все, что с '#', будет предшествовать всему, что не имеет, если они ссылаются на одну и ту же вещь.

Проверьте эту ссылку для получения дополнительной информации.

Answer 3

Основа:

Пока вы используете те же селекторы, это верно:

Встроенные стили имеют приоритет 1 Стили, определенные в голове, имеют приоритет 2 Стили в связанной таблице стилей имеют приоритет 3

Но есть и другие правила приоритета

Если вы используете только связанную таблицу стилей или определяете стили в голове, это действительно так:

Приоритет 1: ID (потому что может быть только один)
Приоритет 2: .classes (потому что должен быть добавлен .class)
Приоритет 3: теги (самый низкий приоритет, потому что не прикреплены класс или идентификаторы)

Чем ближе идентификатор к телу, тем выше приоритет.

<div id="first-id">
  <div id="second-id">
    <div class="someclass">

    </div>
  </div>
</div>


#first-id .someclass {}

бьется

.someclass {}

а также

#second-id .someclass {}

НО

Вы можете заставить .someclass побить идентификаторы, используя

.someclass { color:#f00 !important;}

Но я не уверен, что поддержка браузера включена! Важный;

Answer 4

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

Возьмите этот пример:

 <ul id="stories" class="default">
   <li>this is the end</li>
   <li class="expand">this is the end</li>
 </ul>
 <ul class="default">
    <li>this is the end</li>
    <li class="expand">this is the end</li>
 </ul>
 <ul>
   <li>this is the end</li>
   <li class="expand">this is the end</li>
 </ul>

Как бы вы нацелились на список #stories, если бы селекторы не работали таким образом?

Answer 5

Кажется, что так оно и работает (иногда разочаровывает), селектор идентификатора более специфичен , чем класс.