2010-08-10 7 views
47

heno que tienen un elemento como esteelementos de estilo con un punto (.) En el nombre de la clase

<span class='a.b'> 

Desafortunadamente este nombre de clase proviene de una aplicación de comercio electrónico y no puede ser cambiado.

¿Puedo darle un nombre de clase con un punto dentro?

como

.a.b { } 
+22

Lo demente sistema generará un nombre de clase, tales? – SLaks

+0

Parcialmente engañado, pero probablemente responda la pregunta: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names –

+0

sistema loco: los nombres de las clases son claves del archivo de propiedades.Los diferentes archivos de propiedades para diferentes idiomas permiten un formato dinámico basado en el mismo contenido independiente del lenguaje pero semánticamente. – mut1na

Respuesta

79
.a\.b { } 

Sin embargo podría haber alrededor de los navegadores que no soportan esto.

+0

me gusta? ¿Lo soportarían Firefox 1.5 +, Safari 3+ e IE 6+? – dotty

+2

No estoy seguro (por lo tanto el "podría"). Sin embargo, IE6 sorprendentemente lo hace. – RoToRa

+1

Era IE5.x, y las primeras versiones de Opera, que no eran compatibles. – bobince

-6

Sí, puedes. El significado del nombre de la clase CSS como '.a.b' está dirigido a elementos que tienen un nombre CSS con 'a' que también tiene el nombre de clase 'b', es decir que tienes ambas clases en el mismo elemento. Así como div.cssname apunta a elementos div con cssname.

+3

Esto se ha rechazado porque no has entendido la pregunta. El OP no tiene ningún elemento con la clase "a" o la clase "b", está intentando diseñar un elemento con la clase "a.b". – thelem

26

Llegando muy tarde a esta fiesta, pero puede usar los selectores de atributos.

En su caso, para apuntar el elemento class='a.b', que puede usar:

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

Además, aquí está la lista completa de los selectores de atributos.

Atributo Selector presente

// Selects an element if the given attribute is present 

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

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

atributo es igual a Selector de

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

atributo contiene 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 comienza con 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 Termina con selector de

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

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

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

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

Atributo con guión Sele Hé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

+2

El selector espaciado de atributos es probablemente más apropiado para el caso general, ya que puede haber otros clasificados en el elemento para el que no desea seleccionar. – thelem

Cuestiones relacionadas