Проблема вложения CSS - чтение информации о контейнере

Question

Эта проблема возникает время от времени, когда я работаю с CSS, вот проблема, с которой я сталкиваюсь.

Мой текущий код:

<div class="entry">
  <div>
    <blockquote><p>quoted text</p></blockquote>
  </div>
</div>

В моем css у меня есть:

.entry p {margin: 10px}
blockquote {stuff}
blockquote p {margin: 0px}

Я думаю, что абзац внутри блочной цитаты будет читаться из 'blockquote p', но вместо этого он берет поле: 10px от '.entry p'.

Почему он читает из «записи p» вместо «blockquote p»?

Answer 1

Это связано с специфичностью .

То есть .entry p выше, чем blockquote p

.хотя есть и другие решения)

.entry blockquote p

Answer 2

Хотя обычно в CSS побеждает последнее объявление, это верно только в том случае, если они оба имеют одинаковый вес специфичности .Однако, если 2 селектора не имеют одинаковой специфичности, нижний будет переопределен , даже если он будет добавлен позже в коде .

, поскольку селектор classname имеетболее высокое значение специфичности, чем у селектора tagname , ваше второе объявление переопределяется.

Чтобы придать последнему более высокую специфичность, вам придется дополнительно его квалифицировать:

.entry blockquote p {margin: 0px}

Или используйте страшный !important:

blockquote p { margin: 0px !important }

Используйте второй метод только тогда, когда первый не удастся (В вашем примере первый будет хорошо).

Answer 3

Когда мы объявляем класс, он получит первое предпочтение над CSS, определенным для тегов.

Answer 4

Дело не в порядке документа для CSS, а в специфичности селектора. Подробнее см. Расчет специфичности селектора .

Answer 5

Вы указываете класс для .entry, который является специфическим - не глобальным.

Вы пробовали:

.entry blockquote p
{
    margin: 0px;
}