По какой-то причине объявление ::selection в моем CSS просто не работает, оно всегда ведет себя по умолчанию (светло-синий фон в Chrome, Mac).Как увидеть :: выбор в инструментах разработчика Chrome
код отлично работает в a jsbin
::selection {
background: red;
}
Таким образом, мое предположение что-то быть переопределена где-то в проекте, но я не могу найти другую декларацию ::selection в любом месте таблицы стилей. Мне было интересно, есть ли способ увидеть это в Инструментах разработчика, чтобы попытаться определить или отладить, почему он не работает в моем проекте?
Даже предоставление CSS !important декларации не помогает.
редактировать
ОК, я попытался отладки дальше, добавив:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
в колонтитуле документа, и, таким образом, получается, что один не может объединить эти два заявления в одном заявлении, который был упомянут Крисом Coyier в this comment:
у меня вопрос: почему не можете вы кладете :: s выборы и :: - моз-выбор вместе и определить ценность для них обоих? Если вы сделаете это, FF проигнорирует значения.
Это хороший урок CSS! Когда браузер не понимает какую-либо часть селектора, он игнорирует весь селектор (даже если они разделены запятой). Есть исключения , но в основном в старых браузерах (IE 7?).
Итак, все хорошо и работает снова, но вопрос все еще стоит, я полагаю, есть способ увидеть это объявление в devtools каким-то образом?
редактировать 2
Хорошо, конечно, когда декларация сидит на своей собственной линии, то она появляется в инспекторе.
редактировать 3
очень актуален SO вопрос: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
Я просто удивлен Chrome не только до сих пор показывает искаженное заявление в инспекторе, а не скрывая его полностью.
Самое смешное, что я удивлен Chrome игнорирует это правило в настоящее время. Он не использовал. По крайней мере, Safari не использовал, и я не знаю, все ли это делает. – BoltClock