elementi stilistici con un punto (.) Nel nome della classe

Question

Hay mi hanno un elemento come questo

<span class='a.b'> 

Purtroppo questo nome di classe deriva da un'applicazione e-commerce e non può essere modificato.

Posso assegnare un nome di classe allo stile con un punto?

come

.a.b { } 

Answer 1

.a\.b { } 

Tuttavia ci potrebbero essere i browser in giro che non supportano questo.

Answer 2

Sì, è possibile. Il significato del nome della classe CSS come '.a.b' è il targeting di elementi che hanno il nome CSS con 'a' che ha anche il nome di classe 'b', cioè che hai entrambe queste classi nello stesso elemento. Proprio come div.cssname per il targeting di elementi div con cssname.

Answer 3

Arriva molto tardi a questa festa, ma è possibile utilizzare selettori di attributo.

Nel tuo caso, per indirizzare l'elemento class='a.b', è possibile utilizzare:

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

---

Inoltre, ecco la lista completa dei selettori di attributo.

Attributo selettore Presente

// Selects an element if the given attribute is present 

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

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

attributo Equals Selettore

// 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/"] {...} 

attributo contiene Selettore

// 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"] {...} 

Abilità inizia con selettore

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

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

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

Abilità scade Con selettore

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

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

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

Abilità Spaced selettore

// 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"] {...} 

Abilità hyphenated Sele ctor

// 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