首页 > 解决方案 > 无法覆盖引导程序来实现我自己的 CSS

问题描述

.lo:link, .lo:visited {
    color: #0060b6;
    text-decoration: none;
    background-color: transparent;
}
<div class="row">
      {% for project in projects %}
      <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
          <img src="{{ project.image.url }}" height="250" width="348">
          <div class="card-body">
            <h4><a class="lo" href="{{ project.url }}">{{ project.title }}</a></h4>
            <p class="card-text">{{ project.description }}</p>
            <div class="d-flex justify-content-between align-items-center">
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

我正在尝试更改<a>标签中的内容,使其不是蓝色并突出显示。

CSS 链接的顺序正确——首先是引导程序,然后是我自己的。

我也尝试!important在每个 CSS 属性不起作用后添加。

我正在使用 Django 块内容方法来设置页眉和页脚,但这应该没有任何区别。

标签: cssbootstrap-4

解决方案


您应该使用id而不是class,因为 id 比 class 具有更高的优先级:

#lo:link, #lo:visited {
  color: #0060b6;
  text-decoration: none;
  background-color: transparent;
}

推荐阅读