css - 删除 HTML 字符的 Bootstrap 样式

Question

• 默认的重检查 (✔) 显示为“✔”
• Bootstrap 4.3 似乎正在对支票进行样式化，迫使浏览器呈现为深绿色，这不符合我的口味——请参阅下面的示例
• 我想删除 Bootstrap 的样式，但无法检测到所使用的样式规则。我试图通过 grep -irn 10004 找到它，但没有成功

如何将样式恢复为默认样式以撤消 Bootstrap 的工作？

---

带 Bootstrap :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

---

默认(期望):

.small.text-muted {
 color: #444;
 font-size: .85rem;
}

✔ 

<div class="small text-muted">
This is how I want the checkmark to appear, but still including Boostrap on the page.</div>

Answer 1

之所以“✔”格子的样式为绿色，是浏览器根据字体规则设置了样式所致。

能够将样式恢复为复选标记的默认样式并撤消 Bootstrap 的 CSS。您需要覆盖 body 中的 font-family 属性并删除 "Segoe UI Emoji" 字体。

Note that you need to add !important to override the style.

请看下面的代码

body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"!important
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

---

或者为了避免使用 !important(如 Jon P 所述)，您可以创建一个 style 标签之后 Bootstrap css 文件，以便它将覆盖样式。

Note: Bootstrap css file should be declared first then declare the style to override next.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
  body{
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Symbol","Noto Color Emoji"
  }
</style>


&#10004; 

<div class="small text-muted">
In case your browser is doing something different, this appears as a green checkmark in Bootstrap.  The green checkmark is not the default.  I don't know how to modify this HTML character so it shows with browser default styling.</div>

希望这对您有所帮助。