如何在Chrome开发者工具中查看:: selection

Question

For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).

The code works fine in a jsbin

::selection {
  background: red;
}

Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?

Even giving the CSS an !important declaration isn't helping.

edit

OK, I tried debugging further by adding:

<style type="text/css">
::selection, ::-moz-selection {
  background: red !important;
}
</style>

to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment :

I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.

That's a good CSS lesson! When a browser doesn't understand any part of a selector, it ignores the whole selector (even if they are comma separated). There are some exceptions but mostly in old browsers (IE 7?).

So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?

edit 2

Ok, of course, when the declaration sits on its own line, then it appears in the inspector.

edit 3

A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.

Answer 1

Try to check via inspect element.

1. Right click on web page
2. Select "inspect" option
3. In inspect element panel, there will be style appear in right hand side.
4. You will find your :selection declaration in it.