如何使用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中的任何属性。

例如：

#DisplayGraph {
height: calc(100% - 37px);
width: 100%;
transform-origin: left top;
position:fixed;
top: 37px;
left:0px;
overflow:auto;
}