Arhn - архитектура программирования

Правильное использование селектора CSS: not для исключения элемента в конкретном контейнере

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

В настоящее время я пытаюсь применить некоторые стили, которые должны повлиять на большинство элементов h2, но не на элементы h2, которые появляются внутри div с классом «блок». Как в этом случае будет выглядеть селектор CSS? Я пошел на риск и попробовал это, но был прав, предположив, что это не совсем правильно.

h2:not(.block h2) {
   ~styling for main h2 elements~
}
.block h2 {
  ~separate styling for h2 elements within .block div~
}

Может кто-нибудь пролить свет? Спасибо!

html css css-selectors
21.09.2016

  • Вы пытались изменить порядок и поместить .block h2 выше, так как первый не знает, что такое .block h2, когда он загружается первым. 22.09.2016
  • Можете ли вы дать нам образец HTML и фактические стили, которые необходимо применить? 22.09.2016
  • К сожалению, это не работает, селектор внутри :not() должен быть простым селектором. Это означает, что селекторы потомков, такие как .block h2, не будут работать. 22.09.2016
  • Вам действительно лучше, если вы не прыгаете через обручи, пытаясь избежать стилей для общего h2, влияющего на те h2 внутри div.block, а просто переписываете общие стили. которые вам не нравятся для div.block h2 с конкретными значениями свойств, которые вы хотите, чтобы они имели. 22.09.2016
  • Где-то есть канонический для этого... 22.09.2016

Ответы:


1

Вы можете попробовать это:

h2 {...}

.block h2 {...}
21.09.2016
  • Да, просто, но это, кажется, работает нормально. Очень признателен! 22.09.2016

    • 2

    Я пытаюсь применить некоторые стили, которые должны повлиять на большинство элементов h2, но не на элементы h2, которые появляются внутри div с классом block.

    Вы не указали уровень, на котором h2 существует в div. Итак, вот несколько вариантов, если вы хотите использовать псевдокласс :not().

    Если h2 находится на одном уровне:

    div:not(.block) h2 {
    color: red;
}
    <div class="block">
    <h2>with block class</h2>
</div>

<div>
    <h2>without block class</h2>
</div>

    Если h2 находится на двух уровнях:

    div:not(.block) div h2 {
  color: red;
}
    <div class="block">
  <div>
    <h2>with block class</h2>
  </div>
</div>

<div>
  <div>
    <h2>without block class</h2>
  </div>
</div>

    Если h2 составляет три уровня в:

    div:not(.block) div div h2 {
  color: red;
}
    <div class="block">
  <div>
    <div>
      <h2>with block class</h2>
    </div>
  </div>
</div>

<div>
  <div>
    <div>
      <h2>without block class</h2>
    </div>
  </div>
</div>

    и так далее...

    Также имейте в виду, что :not(), существующий в настоящее время в большинстве браузеров, принимает только простые селекторы. как аргумент.

    Ваш пример...

    h2:not(.block h2) {
   ~styling for main h2 elements~
}

    ... не работает в большинстве браузеров, потому что аргумент содержит сложный селектор (в данном случае созданный комбинатором-потомком).

    Подробнее здесь: https://stackoverflow.com/a/37305971/3597276

    21.09.2016
  • Этот ответ может быть хорошим решением в зависимости от html OP (который он не предоставил). 22.09.2016
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..