¿Cuál es la mejor manera de crear un reinicio de estilo para solo una parte del DOM?

StackOverflow https://stackoverflow.com/questions/334705

  •  22-07-2019
  •  | 
  •  

Pregunta

Estoy tratando de crear un restablecimiento de CSS que se dirige solo a mi control. Entonces el HTML se verá así: 

<body>
  <img class="outterImg" src="sadkitty.gif" />
  <div id="container" class="container">
    <img class="innerImg" src="sadkitty.gif" />
    <div class="subContainer">
      <img class="innerImg" src="sadkitty.gif" />
    </div>
  </div>
  <img class="outterImg" src="sadkitty.gif" />
</body>

El CSS es con lo que tengo problemas, pero actualmente estoy trabajando con esto: 

img 
{
  // Bad style declarations for the entire page
  border: solid 3px red;  
  width: 50px;
}

.container img, .container div, .container etc.
{
  // Style reset for specific elements within my control "container"
  border: solid 3px blue;
  width: 100px;
}

.innerImg img
{
  // The target style for the specific class/element within the control
  border: solid 3px green;
  width: 200px;
}

El problema es que " .innerImg img " no anula " .container img " como era de esperar Entonces, ¿cuál sería el mejor método para restablecer el estilo de todos los elementos dentro del "contenedor"? elemento, y luego colocar estilos en clases dentro de ese elemento?

¿Fue útil?

Solución

El selector .innerImg img se refiere a un elemento img dentro un elemento con la clase innerImg. No hay nada de eso en su documento.

Lo que probablemente quiera allí es img.innerImg .

Más allá de eso, hay un cálculo corto para especificidad del selector que determinar qué regla se sigue. (Ese enlace contiene mi nuevo calificador favorito en cualquier documento: " en un sistema de números con una base grande ")

Otros consejos

Sospecho que esto se acerca a lo que querías. 

img  
{  
  border: solid 3px red;  
  width: 50px;  
}  
.container .innerImg, .container div  
{  
  border: solid 3px blue;  
  width: 100px;  
}  
.container .subContainer  
{  
  border: none;  
}  
.subContainer .innerImg  
{  
  border: solid 3px green;  
  width: 200px;  
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top