Предполагая эту наценку:

<html class="fr">
<head>
</head>
<body>
 <div class="class1">
 </div>
</body>
</html>

Будет ли это:

.fr .class1 {
  background-color: blue;
}

Имеют приоритет над этим:

.class1 {
  background-color: red;
};

Редактировать:

Тем, кто задается вопросом, да, я пробовал :) Я не объяснил здесь всю проблему и обнаружил проблему после этого сообщения.

По сути, у меня было два стиля в одной таблице стилей:

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

Хотя технически .fr .class1 имеет приоритет над .class1, это не означает, что элемент заменяет все стили .class1 стилями .fr .class1. . Вместо этого он сначала ищет стили в .fr .class1, а затем в .class1. Это «очевидно», но вот почему я столкнулся с трудностями.

Моей целью было удалить стили, используя приоритет .fr .class1 над .class1. Я понял, что для этого мне нужно установить значения 0 или нейтральные значения:

Пример)

.fr .class1 {
  font-size: 12px;
  line-height: 0;
  height: auto;
}

В противном случае он перейдет в .class1 и заполнит эти стили.

1
djreed 28 Авг 2011 в 07:09

3 ответа

Лучший ответ

Да, поскольку .fr .class1 ссылается на два имени класса, а .class1 ссылается только на один, первое является более конкретным. Правила стандарта CSS находятся здесь.

7
Douglas 28 Авг 2011 в 03:13

Да, потому что в первом примере есть два имени класса по сравнению с одним .

Пример: http://jsfiddle.net/jasongennaro/yQvAF/.

Попробуйте использовать этот калькулятор специфичности CSS: http://www.suzyit.com/tools/specificity.php < / а>

1
Jason Gennaro 28 Авг 2011 в 03:15

В ответ на редактирование:

CSS применяет значения к каждому свойству индивидуально. Группировка блоков не имеет значения. Так

.fr .class1 {
  font-size: 12px;
}

.class1 {
  font-size: 12px;
  line-height: 18px;
  height: 80px;
}

Такой же как

.fr .class1 {
  font-size: 12px;
}
.class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}

Который, поскольку .fr .class1 более конкретен, чем один .class1, совпадает с

.fr .class1 {
  font-size: 12px;
}
.class1 {
  line-height: 18px;
}
.class1 {
  height: 80px;
}
1
user123444555621 28 Авг 2011 в 07:01