为什么我的 css 只应用了 div 的一半

Question

Why is half of my css code working only on half of the div? this is my code

 #cardleft h1{ margin-top: 25px; text-align: center; font-size: 40px; line-height: 40px; position: relative; left: 0px; } #cardleft{ border: 2px solid #68C3A3; margin-right: 10px; border-radius: 30px 0px 0px 30px ; color: #4aa0c2 !important; } #cardleft:hover{ background-color: #4eb28f; color: gold !important; }

 <div id="cardleft" class="col-md-4 "> <div class="col-md-3"> <i class="fab fa-linkedin fa-6x"></i> </div> <h1>LinkedIn</h1> </div>

I tried multiple ways on doing this, I still am getting same issues. tried adding !important but nothing seems to change.

but weirdly enough the same code works in codepen.io

am I doing something wrong in the IDE? I'm using visual studio code

Answer 1

 #cardleft h1{ margin-top: 25px; text-align: center; font-size: 40px; line-height: 40px; position: relative; left: 0px; } #cardleft h1, #cardleft i{ color: #4aa0c2; } #cardleft{ border: 2px solid #68C3A3; margin-right: 10px; border-radius: 30px 0px 0px 30px ; } #cardleft:hover{ background-color: #4eb28f; } #cardleft:hover h1, #cardleft:hover i{ color: gold !important; }

 <div id="cardleft" class="col-md-4 "> <div class="col-md-3"> <i class="fab fa-linkedin fa-6x"></i> </div> <h1>LinkedIn</h1> </div>

You need to add color style to h1 tag.

Answer 2

Maybe you just have to create unique names for the css classes in this HTML file? Sounds like the text color is being overwritten somewhere else because of class names.