如何防止特定 css 样式 sheet 设置特定 html 标签的样式

Question

我正在将 bootstrap 合并到我的页面中，但它改变了边缘脚本中的一些间距和导航菜单中的一些边框。我想 "turn off" bootstrap css 样式是我的一些 div 标签。我怎样才能做到这一点？例如，我想阻止我的本地 bootstrap css 文件设置以下 #logo 标签的样式：

<head>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
 <div id="logo"> 
  <script type="text/javascript" charset="utf-8" src="logani_edgePreload.js"></script>
  <style>
    .edgeLoad-EDGE-915774383 { visibility:hidden; }
  </style>
    <div id="Stage" class="EDGE-915774383"> </div>
 </div>
</body>

Answer 1

老实说，我认为你只需要给你自己的任何CSS更多"specifity"。

我猜你有任何文件，让我们称之为 "main.css" 文件，你有 "customized" css。在那里你可以指定，也许用 !important，你想保留的样式。

另一种选择是做我刚才说的同样的事情，但是在你的 html 中添加一些 bootstrap 没有使用的 class，甚至是 id。

<head>
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/your-custom-changes.css">
   <!-- see that you are just using the cascade feature of css -->
</head>

我肯定会做的是尊重 bootstrap css 主题，因此您可以随时将其更改为另一个主题。

引用 (What is the meaning of "cascading' in CSS?):

"Cascading" in this context means that because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.

The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.

Answer 2

您这里有一些与 Bootstrap 完全无关的问题。事实上，您在提供的标记中没有使用任何 Bootstrap 选择器。

一个问题是您需要将 <style> 块移动到 <head>。

您的第二个问题是 .edgeLoad-EDGE-915774383 { visibility:hidden; } 将不匹配 class="EDGE-915774383"。要么将 CSS 选择器更改为 .EDGE-915774383，要么将 class 更改为 class="edgeLoad-EDGE-915774383"。

Answer 3

你不能。 CSS 的作用是使所有应用于该文档的样式表都作为一个整体应用于它。 style 元素的起草 scope 属性有一天可能会改变，但即使有了它，您也可以将适用性限制在特定元素及其后代，而不是排除。

因此，如果您使用的是 Bootstrap CSS，则您需要处理。您可以检查（使用浏览器开发人员工具）它如何影响特定元素，然后如果需要，您可以通过使用在级联中“击败”它们的规则来覆盖这些设置。

如何防止特定 css 样式 sheet 设置特定 html 标签的样式

How to prevent specific css style sheet from styling a specific html tag

css

twitter-bootstrap