Pure CSS selector for Quirks/BackCompat mode for Chrome and Firefox

Question

This isn't so much a CSS selector quirk as it is an HTML quirk, but the id and class attributes become case insensitive in quirks mode, which means selectors that differ in case will always match. See this answer and its first footnote for details.

If you can modify your HTML across all your pages, add a class to either your html or body element (the class name doesn't matter) and prefix your quirks selectors with that same class name, in a different case. Here's a code example:

<html class="quirks">
<!-- Or: <body class="quirks"> -->

#foo {
    width: 480px;
    padding: 10px;
}

/* Capital Q instead of small q, won't match in standards mode with a doctype */
.Quirks #foo {
    width: 500px;
}

This applies to all browsers.

If you cannot modify your HTML, then I don't believe there is a pure CSS solution for this that applies to all browsers. In previous versions of IE you could simply deliberately use CSS2.1 selectors to hide styles from IE5 quirks and older versions (like the good ol' html > body hack), but you can't do this with Chrome and Firefox, or the new interoperable quirks mode introduced in IE10, because they support the same advanced selectors in quirks and standards mode.