时间戳

首页 > 解决方案 > 为什么我的 css 只应用了一半的 div

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

问题描述

为什么我的一半 css 代码只在一半的 div 上工作？这是我的代码

#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>

我尝试了多种方法来做到这一点，我仍然遇到同样的问题。尝试添加!important，但似乎没有任何改变。

但奇怪的是，相同的代码在 codepen.io 中工作

我在 IDE 中做错了吗？我正在使用视觉工作室代码

标签： htmlcss

解决方案

#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>

您需要为h1标签添加颜色样式。

推荐阅读