Почему:: select был удален из спецификации CSS Selectors и как его специфичность работает против селекторов типов?

Некоторые вопросы об использовании CSS для указания цвета выделенного текста:

  • https://developer.mozilla.org/En/CSS/::selection говорит, что

    ::selection был разработан для CSS3 Селекторы, но удалены из текущий проект CSS3. Во всяком случае, это реализовано в браузерах и поддержке будет продолжаться.

    Почему это было удалено?

  • Представьте, что в CSS по умолчанию, реализованном браузером, существует такое же правило, как и следующее:

    ::selection { background-color: Highlight; color: HighlightText; }

    Далее представьте, что правило, подобное приведенному ниже, определяется в любой специальной таблице стилей, определенной сайтом:

    body { background-color: white }

    Учитывая эти правила, каков будет цвет фона выбранного текста тела: было бы оно white или Highlight?

    Возможно, правило в таблице стилей автора должно переопределить правило по умолчанию: поскольку в соответствии со спецификой, body имеет такое же значение, как ::selection, и указан позже (и поэтому должен переопределять предыдущую запись).

    С другой стороны, это приведет к тому, что текст будет невидимым при его выборе (потому что если Highlight является синим, а HighlightText - белым, чтобы выделенный текст был белым на синем, то переопределение background-color выделенного текста, чтобы он был белым, чтобы он был белым на белом).

  • Предполагая, что поведение на шаге 2 нежелательно, как его избежать?

    • Скажите, что это ошибка в таблице стилей пользователя, которая никогда не должна указывать background-color без указания color?

    • Скажите, что body не соответствует выбранному тексту тела, кроме случаев, когда псевдо-элемент ::selection указан как часть селектора?

Ответы

Ответ 1

Селектора типов (например, body) и селекторы псевдоэлементов (например, ::selection) действительно имеют одинаковую специфичность, но < сильная > специфика только вступает в игру, когда два селектора выбирают один и тот же элемент.

Селектор body не выбирает выделенный текст или любой текст вообще - он выбирает элемент <body>. Его элемент, а не его текст, который имеет цвет фона.

В то время как ::selection выбирает воображаемый элемент, который окружает текущий выбранный текст на странице. Таким образом, не существует конфликта между стилями, установленными на body и ::selected, поскольку селекторы выбирают разные вещи.

Пример

Представьте, что у вас был следующий HTML:

<body>
    I am some body text.

    <p>I am some text in a paragraph.</p>
</body>

И следующий CSS:

p {
    background-color: red;
}

body {
    background-color: white;
}

Оба селектора имеют одинаковую специфичность, но фон <p> s по-прежнему будет красным, потому что это не элемент <body>.

То же самое верно, если вы замените p на ::selection - выбранный фон текста будет красным, потому что текст внутри элемента <body> не является элементом <body>.

Итак, в основном, что вы сказали здесь:

body не соответствует выбранному тексту тела, кроме случаев, когда псевдо-элемент ::selection указан как часть селектора

Ответ 2

Следующий стиль:

body { background-color: white }

применяется к цвету фона вашей страницы.

С другой стороны, это правило:

::selection { background-color: Highlight; color: HighlightText; }

применяет стили, когда вы выбираете текст на своей странице.

Таким образом, они делают совершенно разные вещи, и нет никаких сомнений в их столкновении.

Ответ 3

Почему это было удалено?

Хорошо, это будет вопрос, который вам нужно будет задать комитету W3C, который удалил его из черновика. Я понимаю, что в сообществе W3C было много внутренних потрясений, так как они начали писать черновики HTML5 и CSS3. Некоторые люди, которые запускают проекты, разрабатывающие браузеры (и я не буду входить в имена), хотели, чтобы это было сделано одним способом, и разработчики были прокляты. Сообщество разработчиков захотело сделать это по-другому, и поэтому началась вражда над тем, кто должен контролировать W3C.

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

Sarfraz ударил его по голове здесь, псевдо-класс: select произвел только выделенный текст. Поэтому в вашем примере, когда вы выделяете что-то, цвет фона меняется на "Выделение", когда он не выбран, он возвращается к белым.

Я не тестировал этот конкретный пример, но вот что я понимаю об этом

Ответ 4

::selection будет отменять цвет фона после выбора и вернет его в body{background-color: white;} после удаления текста.
мы просто должны всегда обеспечивать правильные цвета и значения фона как для выбора, так и для основного стиля.