Cada vez que asigno un nombre de clase o una identificación a mi etiqueta img en mi javascript (usando react.js) y luego un estilo que hace referencia a esa identificación o clase, el estilo no se aplica, sin embargo, cuando hago lo mismo para un div, todo funciona bien. .
<--javascript-->
import React from "react"; import TitleImage from './Images/TitleBG.png' import TitleImage2 from './Images/TitleMG.png' import TitleImage3 from './Images/TitleCG.png' import './heade.css'; const TopHeading = () => { return( //Here is a div with the ID "TopHeading", this style gets applied. <div id="TopHeading"> {/*This image with class "image1" does not get its style applied.*/} <img className="image1" alt="Dofus" src={TitleImage}/> <img width='auto' alt = "Memory Game" height='50px' src={TitleImage2}/> <img width='auto' alt = "Character" height='50px' src={TitleImage3}/> <div className="aDiv"></div> </div> ); };<--css-->
#TopHeading{ display: grid; align-items: center; justify-items: center; background-color: rgb(131, 192, 131); height: 300px; }; .image1{ border-style: solid; width: auto; height:250px; } .aDiv{ size: 50px; border-style: solid;Aquí puede ver cómo se aplica el estilo del ID al div.
Y aquí está la imagen con el estilo de la clase ignorado por alguna razón:
El punto y coma antes de su regla de clase en su CSS hace que su selector no sea válido. No coloque un punto y coma fuera de los corchetes { } de una regla.
esto no funciona
; div { height: 50px; width: 50px; background: red; } <div></div>Mientras esto hace
div { height: 50px; width: 50px; background: red; } <div></div>