Каковы приоритеты среди CSS-селекторов

Question

Вопрос CSS:Если к элементу применяются два разных селектора, кто выиграет?

Я знаю, что этого не должно произойти, но я хочу настроить устаревшее приложение, а CSS оказывается посередине.

Answer 1

подробности gory в спецификации на самом деле достаточно читабельны. В итоге:

<Ол>

! важные правила и встроенные правила style выигрывают больше всего.

В противном случае обычно выигрывают более конкретные. #id является более конкретным селектором, чем .classname более специфичным селектором, чем tagname .

Если правила одинаково специфичны, победит тот, который объявлен последним.

Нет особой причины, по которой это не должно происходить & # 8217 ;. Нормально указать правило широкой кисти, а затем добавить более конкретное правило для одного случая; несколько правил одинакового свойства для одного элемента не являются необычными или нежелательными.

Answer 2

вам нужно найти #no of id =A, #no of class =B и #no of tag =c в селекторе

ABC с более высоким значением выигрывает.

.wrapper .title  p {  
  //some other rules
}

A=0 B=2 C=1 =021

\#foo {
  // some more rules
}

A=1 = 100

.bar .head div li{
  // some more rules
}


A=0 B=2 C=2 =022

100>022>021

итак #foo побеждает

Answer 3

Это должно произойти! Вот почему он называется CASCADING. Вы можете найти пример приоритетов здесь

Answer 4

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

Answer 5

«#id» более мощный, чем имя «.class», а «.class» более мощный, чем имя «tag».Но если мы применим «!important», то приоритет будет у большинства из них.

• !важный
• встроенный стиль
• идентификатор
• сорт
• ярлык

Answer 6

Приоритет между селекторами определяется их спецификой. Более конкретные селекторы побеждают менее специфичные.

Если два селектора одинаково специфичны, последний выигрывает у первого.

Существует три уровня специфичности: идентификатор, класс и элемент. Поэтому #elem выигрывает у .elem , поскольку идентификатор более конкретен. .elem .cont выигрывает у .elem , поскольку у него больше селекторов на одном уровне.

Подробнее читайте в разделе "Что происходит при возникновении конфликтов?" на учебном пособии .

Answer 7

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

Подробнее о специфике селектора: Энди Кларк написал Specificity Wars, который является лучшим обзором их работы.

Answer 8

CSS означает Каскадные таблицы стилей. Это означает, что правила применяются к элементам каскадным способом. Совершенно нормально, что разные селекторы применяются к элементу. Думает, например, следующее:

<div class="wrapper">
  <div id="foo" class="bar" style="some rules">Test</div>
</div>

Следующие правила влияют на " foo " Элемент:

.wrapper {
  //some other rules
}

#foo {
  // some more rules
}

.bar {
  // some more rules
}

Правила приоритетов можно найти здесь .

Я всегда советую использовать плагин Firefox " firebug " . Он покажет вам, какие именно свойства оцениваются для конкретного элемента и почему, подчеркивая переопределения во время каскада.

Answer 9

1. ! важный
2. встроенный стиль
3. #id
4. класс
5. теги