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

Почему элемент ‹p› зеленый?

Я просматривал этот пример CSS со страницы Mozilla для :not() селектор.

Пример:

p:not(.classy) { color: red; }
:not(p) { color: green; }
<p>Irgendein Text.</p>
<p class="classy">Irgendein anderer Text.</p>
<span>Noch mehr Text<span>

Что я полностью понимаю:

  • Я понимаю, почему первый элемент p красный, потому что это элемент p, и он не имеет класса «классный».
  • Я также понимаю, почему элемент span зеленый, потому что он выбран элементом :not(p), а не элементом p.

Но почему второй элемент p зеленый? Он не будет выбран первым селектором, потому что это элемент p без класса classy. Но он не будет выбран вторым, потому что это элемент p. Так почему он зеленый?

html css css-selectors
12.04.2018

Ответы:


1

Второй p не :not(.classy), поэтому он не color: red. Это означает, что он по-прежнему имеет цвет по умолчанию, который равен color: inherit.

Элемент body равен :not(p), поэтому он равен color: green.

Таким образом, второй p наследует зеленый цвет от элемента body.

Инструменты разработчика в вашем браузере сказали бы вам следующее:

Инструменты разработчика, показывающие правила CSS, примененные ко второму абзацу, как описано выше

12.04.2018
  • Я должен добавить, что любой, кто собирается утверждать, что :not() требует для работы селектор типа или класса, ошибается, потому что, как показано, :not() работает безоговорочно - результаты просто становятся нелогичными из-за других действующих факторов, например, наследство в этом случае. Не все сводится к тому, чтобы селектор соответствовал рассматриваемому элементу, потому что селектор вполне может соответствовать другим элементам и применять стили, влияющие на макет рассматриваемого элемента. 12.04.2018
  • Я играл с :not([required]) в качестве быстрого полифилла для :optional, но быстро понял, что это не то, что я имел в виду. 12.04.2018
  • Я не думаю, что человек, задающий вопрос, еще не на том этапе, когда он знает об инструментах разработчика — возможно, вы могли бы также включить краткое описание того, как к ним можно получить доступ. 12.04.2018

    • 2

    В дополнение к ответу @Quentin, для вашего понимания попробуйте добавить свои элементы под одним родителем и применить CSS со ссылкой на родительский селектор. Теперь вы получите именно то, что ожидали. Посмотрите на приведенный ниже фрагмент.

    .test p:not(.classy) { color: red; }
.test :not(p) { color: green; }
    <div class="test">
  <p>Irgendein Text.</p>
  <p class="classy">Irgendein anderer Text.</p>
  <span>Noch mehr Text</span>
</div>

    Итак, в вашем случае родительский элемент body и унаследовал цвет оттуда, как ответ выше.

    12.04.2018
    Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге 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 , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..