css - 如何使用 CSS 删除嵌套链接下划线和颜色？

Question

我无法更改/删除嵌套文本的链接下划线和颜色。我检查了调试控制台，颜色显示它继承自 a.masonry-item。我试着改变它，但它没有做任何事情。如果我从调试控制台更改颜色，它会滴下来。我做错了什么？

a.masonry-item {
  text-decoration: none;
  color: red;
}

<a href="#" class="masonry-item">
  <div class="card masonry-content">
    <img src="https://picsum.photos/450/325?image=100" alt="Dummy Image" />
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</a>

我的预期结果是没有下划线的红色文本，但它没有任何效果。

Answer 1

您可以使用“!important”强制删除 CSS 中的任何属性。

例如:

a.masonry-item {
    text-decoration: none !important;
    color: red;
}