css 样式没有得到应用

Question

我有一个 div，我为其定义了如下样式:

 <div class="timeline-icon label" style="margin-top: 10%">
  <a class="red">Changes</a>
 </div>
 <div class="timeline-icon" style="margin-top: 15%">
   <a class="red">25</a>
 </div>

我的 css 文件中有相应的类:

.timeline .timeline-icon a{
  border: 5px solid #2d353c;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  height: 50px;
  line-height: 40px;
  text-decoration: none;
  transition: background 0.2s linear 0s;
  width: 50px;
}

现在对于包含 Changes 文本的顶部 div，我添加了一个名为 label 的额外类，这样 div 将是一个矩形而不是圆形。我想要 timeline-icon 的所有属性，但想覆盖 border-radius 和 width 属性。如何添加选择器？我是 CSS 新手。

Answer 1

您可以像这样简单地将两个类附加在一起:

.timeline .timeline-icon.label a{
  width: 20%;
  border-radius: 30px;
}

您会注意到 timeline-icon 和 label 类之间没有空格，这是因为我们希望样式应用于 a 其父级同时存在两个类的元素。

注意:确保将上述样式放置在您的原始样式(您试图覆盖的样式)之后也很重要。正如在这种情况下，覆盖样式比其前身更具体，因此无论如何都应该应用它，但它仍然值得确保。