Question

我正在尝试在 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>

这可以解决吗？谢谢。

Answer 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>

Answer 2

smugglerFlynn给出的答案将有助于覆盖，并且可以教您CSS优先级值。

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

使用$(document).on('click', '#download_button', function(){ // Settings before generating PDF $('header').hide(); $('footer').hide(); // Generating PDF using HTML2Canvas html2canvas(document.body,{ //Your code }); // Reset properties which was updated before PDF generation $('header').show(); $('footer').show(); });

标识您的身体标签

查询您用<body id="bs-override">覆盖时遇到的任何问题

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

在Bootstrap 4中为<abbr>标签标题重新着色

2 个答案: