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

Ответ 1

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

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

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

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

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

Ответ 2

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

Ответ 3

вам нужно найти #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 выигрывает

Ответ 4

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

Ответ 5

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

• важно!
• встроенный стиль
• ID
• класса
• тег

Ответ 6

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

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

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

Подробнее в разделе "Что происходит, когда возникают конфликты?" на Selectutorial.

Ответ 7

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

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

Ответ 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" . Он покажет вам, какие именно свойства оцениваются для определенного элемента и почему, подчеркивая переопределения во время каскада.

Ответ 9

• важно!
• встроенный стиль
• #id
• класса
• тег