Are CSS selectors case-sensitive?

问题:

I was recently updating a CMS site and a tab-navigation plugin had inserted the following markup:

<li id="News_tab">...

I've always written my CSS selectors in lowercase so when I tried to style this with #news_tab, it wouldn't apply, but #News_tab worked.

After all these years I'm surprised that I haven't run into this before, so I've always been under the impression that CSS was case-insensitive. Has CSS always been case-sensitive and I just haven't noticed thanks to my consistent code style?

回答1:

CSS itself is case insensitive, but selectors from HTML (class and id) are case sensitive:

CSS recommendation on case sensitivity

HTML recommendation, id attribute (note the [CS])

回答2:

CSS4 (CSS Selector Level 4) adds support for case-insensitive match (ASCII only).

input[value='search' i]

It's the "i" at the end which would do the trick...

Check my other answer for details which browser supports this.

回答3:

Class and ID attributes are case sensitive:

http://reference.sitepoint.com/css/casesensitivity

回答4:

http://www.w3.org/TR/CSS2/syndata.html

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS

From the docs website.

---

Follow-up for selectors:

http://www.w3.org/TR/CSS2/selector.html

The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.