CSS Clases y subclases

Question

¿Es posible, aparte de lo que estoy haciendo porque no parece funcionar, hacer esto? Quiero poder tener subclases que estén debajo de una clase para usar el CSS específicamente para esa clase.subclass.

CSS

.area1 
{ 
    border:1px solid black; 
} 
.area1.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2.item 
{ 
    color:blue; 
} 

HTML

<div class="area1"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 
<div class="area2"> 
    <table> 
     <tr> 
      <td class="item">Text Text Text</td> 
      <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 

Así que solo puedo usar class = "elemento" para los elementos bajo el padre css clase "1 Area", "área2". Sé que puedo usar class = "area1 item" para hacer que esto funcione, pero no entiendo por qué tiene que ser tan detallado al respecto. ¿No debería la subclase css ver en qué clase padre se encuentra para definirla?

Nota: esto funciona en IE (usando 7 en este momento), pero en FF no, así que estoy asumiendo que esta no es una manera estándar de CSS de hacer algo.

Answer 1

sólo tiene que añadir un espacio:

.area2 .item 
{ 
    ... 
} 

Answer 2

Su problema parece ser un espacio perdido entre sus dos clases en el CSS:

.area1.item 
{ 
    color:red; 
} 

Debe ser

.area1 .item 
{ 
    color:red; 
} 

Answer 3

Simplemente ponga un espacio entre .area1 y .item, por ejemplo:

.area1 .item 
{ 
    color:red; 
} 

este estilo se aplica a elementos con elemento de clase dentro de un elemento con clase area1.

Answer 4

¿Desea forzar que solo se seleccionen niños? http://css.maxdesign.com.au/selectutorial/selectors_child.htm

.area1 
{ 
     border:1px solid black; 
} 
.area1>.item 
{ 
    color:red; 
} 
.area2 
{ 
    border:1px solid blue; 
} 
.area2>.item 
{ 
    color:blue; 
} 

Answer 5

Sólo hay que poner un espacio entre las clases

.area1 .item 
{ 
    ... 
} 

Aquí hay una muy buena referencia para CSS Selectors.

Answer 6

su información, cuando se define una regla como lo hizo anteriormente, con dos selectores encadenadas:

.area1.item 
{ 
    color:red; 
} 

Significa:

Aplicar este estilo a cualquier elemento que tiene tanto la clase " area1 "y" item ".

Tales como:

<div class="area1 item"> 

Por desgracia, no funciona en IE6, pero eso es lo que significa.

Answer 7

también puede tener dos clases dentro de un elemento como este

<div class = "item1 item2 item3"></div>

cada elemento de la clase es su propia clase

.item1 { 
    background-color:black; 
} 

.item2 { 
    background-color:green; 
} 

.item3 { 
    background-color:orange; 
} 

Answer 8

Esa es la columna vertebral de CSS, la "cascada "en Cascada Hojas de estilo.

Si usted escribe sus reglas CSS en una sola línea que hace que sea más fácil ver la estructura:

.area1 .item { color:red; } 
.area2 .item { color:blue; } 
.area2 .item span { font-weight:bold; } 

El uso de múltiples clases es también un buen uso/intermedio avanzado de CSS, por desgracia, no es un conocido IE6 error que limita este uso al escribir código del navegador cruz:

<div class="area1 larger"> .... </div> 

.area1 { width:200px; } 
.area1.larger { width:300px; } 

IE6 IGNORA el primer selector en una regla de multi-clase, por lo que IE6 realmente se aplica la regla .area1.larger como

/*.area1*/.larger { ... } 

Lo que significa que afectará a TODOS los elementos .larger.

Es un error muy desagradable y desagradable (uno de muchos) en IE6 que te obliga a no usar esa característica de CSS si quieres un archivo CSS cruzado.

Después, la solución es el uso de prefijos CSS classname para evitar chocar nombres de las clases genéricas wiht:

.area1 { ... } 
.area1.area1Larger { ... } 

.area2.area2Larger { ... } 

puede también utilizar una sola clase, pero de esa manera se puede mantener el CSS en la lógica usted pensó, mientras sabiendo que .area1Larger solo afecta a .area1, etc.

Answer 9

La clase que aplica en el div se puede usar como punto de referencia para elementos de estilo con ese div, por ejemplo.

<div class="area1"> 
    <table> 
     <tr> 
       <td class="item">Text Text Text</td> 
       <td class="item">Text Text Text</td> 
     </tr> 
    </table> 
</div> 


.area1 { border:1px solid black; } 

.area1 td { color:red; } /* This will effect any TD within .area1 */ 

Para ser súper semántico, debe mover la clase a la mesa.

<table class="area1"> 
     <tr> 
       <td>Text Text Text</td> 
       <td>Text Text Text</td> 
     </tr> 
    </table> 

Answer 10

A raíz de la respuesta de kR105 arriba:

Mi problema era similar a la de la OP (Poster original), sólo se produjo fuera de una tabla, por lo que las subclases no fueron llamados desde dentro del alcance de la clase de padres (la tabla), pero fuera de ella, así que tuve que agregar selectores, como se mencionó en kR105.

Aquí estaba el problema: tenía dos recuadros (divs), cada uno con el mismo radio de borde (HTML5), margen y margen, pero necesarios para hacerlos de diferentes colores. En lugar de repetir esos 3 parámetros para cada clase de color, quería una "superclase" para contener border-radius/padding/margin, luego solo "subclasses" individuales para expresar sus diferencias (comillas dobles alrededor de cada una ya que no son realmente subclases - ver mi publicación posterior).Así es como funcionaba:

HTML:

<body> 
    <div class="box box1"> Hello my color is RED </div> 
    <div class="box box2"> Hello my color is BLUE </div> 
</body> 

CSS:

div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px} 
div.box1 {border:3px solid red; color:red} 
div.box2 {border:3px solid blue; color:blue} 

la esperanza que alguien encuentre útil esta información.

Answer 11

kR105 escribió:

también puede tener dos clases dentro de un elemento como este

<div class = "item1 item2 item3"></div 

no puedo ver el valor de esta, ya que por el principio de estilos en cascada, el último tiene prioridad. Por ejemplo, si en mi ejemplo anterior he cambiado el código HTML para leer

<div class="box1 box2"> Hello what is my color? </div> 

la frontera de la caja y el texto sería azul, ya que el estilo de .box2 asigna estos valores.

También en mi anterior post que debería haber hecho hincapié en que la adición de selectores como lo hice no es lo mismo que crear una subclase dentro de una clase (la primera solución en este tema), aunque el efecto es similar.