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

Question

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

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

Answer 1

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

1. !important правила и inline style правила выигрывают больше всего.

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

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

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

Answer 2

вы должны найти #no id = A, # no класса = B и #no тега = 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

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

• ! * Важно * 1004
• встроенный стиль
• ID
• класс
• бирка

Answer 5

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

Answer 6

1. важно! * * 1002
2. встроенный стиль
3. # идентификатор
4. класс
5. бирка

Answer 7

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 8

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

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

Answer 9

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

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

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

Подробнее в разделе «Что происходит при возникновении конфликтов?» Учебное пособие .