html - CSS样式错误？

Question

我的链接样式有点问题。

有一个 ID 为 kofa 的 div，它基本上包含所有内容。

有一个类为 post-date 的 div，其中有一个链接 (a)。

kofa 中的所有链接都正常工作，但 post-date 中的链接似乎采用了 kofa 的样式' s 链接而不是文件中指定的样式:

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

.post-date a, .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #eee;
    font-size: 14px;
}

Answer 1

您需要在 .post-date 之前添加 #kofa(请参阅下面的代码段)，重要的是如何使用继承 < strong>override 样式。

注意:尽可能避免 !important。

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

#kofa .post-date a, 
#kofa .post-date a:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #666;
    font-size: 14px;
}

<div id="kofa">
  <a> Kofa link </a>
  
  <div class="post-date">
    <a> post link </a>
  </div>

  <a class="post-date">
    wrong way
  </a>
</div>

---

如果你想将该样式应用于包含 post-date 类的 a

<a class="post-date">
    on tag
</a>

#kofa a, #kofa a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

#kofa a:hover {
    margin: 0;
    padding: 0;
    color: #bb0000;
}

#kofa a.post-date, 
#kofa a.post-date:visited {
    padding-left: 50px;
    font-family: planewalker;
    color: #666;
    font-size: 14px;
}

<div id="kofa">
  <a> Kofa link </a>
  
  <a class="post-date">
    applied on a class
  </a>
</div>