Question

我的链接样式有点问题。

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

有一个div post-date ，其中有一个链接（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

您需要在#kofa之前添加.post-date（请参阅下面的代码段），重要的是如何将继承用于覆盖样式。

注意：尽可能避免使用!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>

如果您要将这些样式应用于包含课程a的{{1}}

post-date

<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;
}

Answer 2

这是因为kofa被指定为ID，而post-date仅为＆＃34;＆＃34;一堂课。为避免这种情况，您应该在.post-date中的每个css声明后面设置！important，或者定义内联样式或定义.post-date作为ID。

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

Answer 3

我不知道您的HTML结构。但希望这段代码可以帮到你。

 .first a:visited {
    margin: 0;
    padding: 0;
    color: #a00000;
    text-decoration: none;
}

.first 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;
}

  <div id="kofa">
     <div class="first">
      <a href="">Hello</a>
    </div>
    <div class="post-date">
      <a href="">Post date</a>
    </div>
  </div>

Answer 4

id值10分，等级值1分。为了确定谁获胜，积分加起来。因此，为了确保该类获胜，只需将id声明放在它前面。

#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: #eee;
    font-size: 14px;
}

CSS样式错误？

4 个答案: