Styling elements with a dot (.) in the class name

问题

Hay I have an element like this

<span class='a.b'>

Unfortunately this class name comes from an eCommerce application and cannot be changed.

Can I style a class name with a dot in it?

like

.a.b { }

回答1:

.a\.b { }

However there could be browsers around that don't support this.

回答2:

Coming very late to this party, but you can use attribute selectors.

In your case, to target the class='a.b' element, you could use:

[class~="a.b"] {...}
// or
span[class~="a.b"] {...}

---

Additionally, here is the full list of attribute selectors.

Attribute Present Selector

// Selects an element if the given attribute is present

// HTML
<a target="_blank">...</a>

// CSS
a[target] {...}

Attribute Equals Selector

// Selects an element if the given attribute value
// exactly matches the value stated

// HTML
<a href="http://google.com/">...</a>

// CSS
a[href="http://google.com/"] {...}

Attribute Contains Selector

// Selects an element if the given attribute value
// contains at least once instance of the value stated

// HTML
<a href="/login.php">...</a>

// CSS
a[href*="login"] {...}

Attribute Begins With Selector

// Selects an element if the given attribute value
// begins with the value stated

// HTML
<a href="https://chase.com/">...</a>

// CSS
a[href^="https://"] {...}

Attribute Ends With Selector

// Selects an element if the given attribute value
// ends with the value stated

// HTML
<a href="/docs/menu.pdf">...</a>

// CSS
a[href$=".pdf"] {...}

Attribute Spaced Selector

// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated

// HTML
<a href="#" rel="tag nofollow">...</a>

// CSS
a[rel~="tag"] {...}

Attribute Hyphenated Selector

// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated

// HTML
<a href="#" lang="en-US">...</a>

// CSS
a[lang|="en"] {...}

Source: learn.shayhowe.com

回答3:

Yes you can. The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.

来源：https://stackoverflow.com/questions/3447329/styling-elements-with-a-dot-in-the-class-name