在 Bootstrap 4 中重新着色 <abbr> 标记标题答案

【问题标题】：Recoloring <abbr> tag title in Bootstrap 4在 Bootstrap 4 中重新着色 <abbr> 标记标题
【发布时间】：2019-01-24 03:00:30
【问题描述】：

我正在尝试为 Bootstrap 4 中的 abbr 标签标题设置样式。但是我遇到了麻烦，因为我找不到如何覆盖bootstrap.css。

目前，我正在这样做，但工具提示没有改变：

abbr[title]::after {
  /* content: " (" attr(title) ")"; */
  background-color: indigo;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>
  Pre-mRNA comprises the bulk of <abbr title="heterogeneous nuclear RNA" class="text-info font-italic">hnRNA</abbr>.
</p>

这可以解决吗？谢谢。

【问题讨论】：

标签： html css bootstrap-4 abbr

【解决方案1】：

abbr:hover::after {
  content: attr(title);
  background-color: indigo;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>
  Pre-mRNA comprises the bulk of <abbr title="heterogeneous nuclear RNA" class="text-info font-italic">hnRNA</abbr>.
</p>

【讨论】：

感谢您对我的问题的回复。但是，工具提示应该是单一显示的。页面上有两个工具提示。

【解决方案2】：

smugglerFlynn 的这个答案将有助于覆盖并将教你 css 优先级点值。

https://stackoverflow.com/a/27704409/9996381

用<body id="bs-override">标识你的身体标签

使用#bs-override selector查询您无法覆盖的任何内容

还要确保在所有其他 .css 文件之后调用您的 custom.css。

【讨论】：