Как исключить конкретный класс из css?

Question

Вот мой css:

.single-post .container {
    width: 60%;
}

not(.single-post) .container{
            min-width:92%;
    }

Я пытаюсь достичь следующего: я хочу, чтобы ширина контейнера составляла 60% на отдельных страницах сообщений и 92% на всех остальных страницах. Итак, я пытаюсь исключить класс .single-post из 2-й строки кода, используя not (.single-post) , но он не работает.

Однако , Первая строка кода работает нормально.

Answer 1

Вы можете сначала объявить общий случай, а более конкретный c позже. Порядок объявлений имеет значение (каскадирование). Чтобы проверить это, запустите следующий пример.

.container{
    width:92%;
    background-color: blue;
}

.single-post .container {
    width: 60%;
    background-color: red;
}

<!-- normal page -->
<div>
  <div class="container">
    &nbsp;
  </div>
</div>

<p>&nbsp;</p>

<!-- single post post page -->
<div class="single-post">
  <div class="container">
    &nbsp;
  </div>
</div>

Answer 2

Предполагая, что класс .single-post находится в элементе body или другом родительском элементе, вы можете просто написать следующее:

.container {
  width: 92%;
}
.single-post .container {
  width: 60%;
}

Это установит ширину элемента .container на 92% на всех страницах, кроме случаев, когда он находится на странице .single-post, где ему будет присвоено значение 60%, потому что этот набор правил определяется позже в каскаде и является более конкретным c, чем предыдущий набор правил.

Answer 3

Насколько я знаю, вы не можете использовать: not () для вложенных классов: вложение внутри css: селекторы not ()

Вы можете попробовать использовать !important на отдельных сообщениях?

.container {
  background-color: lightblue;
  margin: 1em 0;
  padding: 1em;
  width: 92%;
}

.single-post .container {
  width: 60% !important;
}

Рабочая скрипка: https://jsfiddle.net/rmgawnu8/1/

Обратите внимание, что вам придется использовать ту же ссылку CSS.

Answer 4

:not(.single-post) .container{
        min-width:92%;
}

: необходимо добавить.

Во-вторых, вам может потребоваться добавить !important после 92%

, чтобы окончательный код был

:not(.single-post) .container{
        min-width:92% !important;
}