Вопрос по html, css-selectors, css – Как бы вы настроили таргетинг только на список #stories, если бы селекторы не работали таким образом?

3

у нижний текст делает текст красным?

#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 ?!

Ваш Ответ

5   ответов
1

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

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

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

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

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

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

<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;}

Но я не уверен насчет поддержки браузера!

0

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

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

 <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, если бы селекторы не работали таким образом?

7

CSS: Spcificity Wars делает довольно хорошую работу, объясняя это с небольшим количеством юмора. Хотя Эрик Мейер добавляет больше ясности вего комментарий.

0

так оно и есть (иногда разочаровывает), селектор идентификаторов болееконкретный чем класс.

5

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

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

Ваш ответ был таким же хорошим, как и тот, который я отмечал, но я чувствовал, что объяснение звездных войн может помочь людям лучше понять его в будущем. Я +1 ваш ответ, чтобы попытаться компенсировать :) Daniel

Похожие вопросы