Можно ли настроить свойства псевдоэлемента :selection в инструментах разработчика?
Я хотел бы иметь возможность тестировать различные цвета фона и шрифта для выбора без изменения исходного файла CSS, но я не могу нигде найти псевдоэлемент при проверке страницы.
Это можно сделать в Internet Explorer и Firefox, щелкнув правой кнопкой мыши на панели Стили и выбрав Новое правило.
::selection и добавьте свойства
В Chrome на панели Стили есть небольшой значок, который можно щелкнуть, чтобы создать новое правило.
::selection и добавьте свойства
::selection.
- person Jesse Schoff; 13.12.2014
p::selection или установите !important после значения для целей тестирования.
- person Sampson; 13.12.2014
!important будет хорошо работать в этом случае.
- person Jesse Schoff; 13.12.2014
Псевдоэлемент ::selection доступен в инструментах разработчика Chrome как последний стиль на панели стилей — почти как если бы это был наименее конкретный стиль. Чтобы просмотреть его, убедитесь, что он определен в вашей таблице стилей, затем выберите текст и проверьте одно из выбранных слов/областей.
Как уже упоминал @Sampson, вы также можете добавить ::selection стили, используя только ::selection или более конкретный селектор, например p::selection или span::selection. Однако имейте в виду, что согласно спецификации вы можете воздействовать только на color, background-color, cursor, outline, text-decoration, text-emphasis-color и text-shadow с помощью псевдоэлемента ::selection.
Еще одно соображение при использовании псевдо ::selection заключается в том, что вы можете повлиять на доступность, создавая выделение с недостаточным контрастом. Вы также можете повлиять на видимость ссылок. В таких случаях вы можете проверить свой контраст с помощью инструмента проверки контраста и создать более конкретные ::selection стили для ссылок, например:
span::selection {
background-color: #b3d8fd;
}
a.footnote span::selection {
color: #920000;
}