如何防止特定的 css 样式表设置特定 html 标记的样式答案

【问题标题】：How to prevent specific css style sheet from styling a specific html tag如何防止特定的 css 样式表设置特定 html 标记的样式
【发布时间】：2015-01-17 17:12:00
【问题描述】：

我正在将引导程序合并到我的页面中，但它改变了边缘脚本中的一些间距和导航菜单中的一些边框。我想“关闭”引导 css 样式是我的一些 div 标签。我怎样才能做到这一点？例如，我想阻止我的本地引导 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>

【问题讨论】：

见这篇文章：Bringing componentization to the web: An overview of Web Components

标签： css twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

老实说，我认为您只需要为您自己拥有的任何 CSS 赋予更多“特殊性”。

我猜你有，我们称它为“main.css”文件，其中有你的“自定义”css。在那里你可以指定，也许使用 !important，你想要保留的样式。

另一种选择是执行我刚才所说的相同操作，但在您的 html 中添加一些引导程序未使用的类，甚至是 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>

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

引用（What is the meaning of "cascading' in CSS?）：

在这种情况下，“级联”意味着因为不止一个样式表规则可以应用于特定的 HTML 片段，有成为确定哪个特定样式表规则的已知方法适用于哪一段 HTML。

使用的规则是通过从更一般的规则中级联来选择的到所需的具体规则。选择最具体的规则。

【讨论】：

这不是一个坏主意，而且似乎工作量也不大，我的大脑正专注于更改引导文件，无论出于何种原因。我会继续讨论这个问题，看看是否有命令或其他东西可以做到这一点。
这个问题虽然是边缘文件，但它们是复杂的 js 文件
只需在 html 中添加您需要的任何 css 或 id，以便您的样式优先于引导程序可以执行的任何 js 更改
标题中css链接的顺序是否决定了层次结构/偏好？
您应该从不太具体到更具体加载 css。 @André Dion 显然没有使用任何引导选择器是正确的。

【解决方案3】：

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

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

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

【讨论】：

不是答案。可以作为评论发布。