CSS selector with period in ID

问题:

The HTML spec allows for periods (.) in an id:

<img id="some.id" />

However, using a CSS ID selector rule will not match correctly:

#some.id { color: #f00; }

The CSS spec for ID Selectors does not mention this case. So I assume it is using the combination of a tag name and class selector? For example, a CSS rule of a.className would apply to all anchor tags (<a>) with a class name of className, like <a class="className"></a>.

Is it possible to have an external CSS file rule that references an HTML element by its id that has a period in it?

I expect not since the CSS spec specifies that a CSS "identifier" does not include the period as a valid character. So is this a fundamental mismatch between HTML and CSS specs? Is my only alternative to use a different type of CSS selection? Can anyone smarter than I confirm or deny this?

(I would remove the period from the HTML id attribute to simplify things, but it is a system-generated id, so I don't have the ability to change it in this case.)

回答1:

Classic. Just after digging through all the specs writing the question, I read through it some more and found there is an escape character. I've never needed it before, but the CSS spec does allow for backslash (\) escaping like most languages. What do you know?

So in my example, the following rule would match:

#some\.id { color: #f00; }

回答2:

You could also use img[id=some.id]]

More info here: http://www.w3.org/TR/selectors/#attribute-selectors