Manipulate :: selection pseudo-element в инструментах разработчика

Question

Возможно ли отредактировать свойства псевдоэлемента: selection в Инструментах разработчика?

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

Answer 1

Вы можете сделать это в Internet Explorer и Firefox, щелкнув правой кнопкой мыши внутри Стили панели и выбирающих Новое правило.

1. правой кнопкой мыши в Стили панели
2. Выберите Добавить новое правило из контекстного меню
3. Написать новое ::selection правило и добавить свойства

Chrome имеет маленький значок в Стили, которую вы можете щелкнуть, чтобы создать новое правило.

1. Нажмите Новый стиль Правило Кнопка в Стили панели
2. Написать новое ::selection правило и добавить свойства

Answer 2

Псевдо элемент ::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; 
 
}