Question

我在HTML中使用<hr />元素。在Bootstrap.css文件中，他们将一些样式应用于<hr />标记。我不想将这些样式应用于我的<hr />标记之一。我怎么能这样做？

Answer 1

假设你有一个包含hr的div的id

<div id="hrDiv">
   <hr>
</div>

要删除样式，可以在选择器

上使用removeAttr属性

$("#hrDiv hr").removeAttr("style");

如果您不使用内联样式，则需要覆盖css中的属性

#hrVid hr
{
//oveeride property
}

您也可以直接将id添加到hr标记

Answer 2

只需覆盖样式。

说引导适用：

hr{ border: 1px solid red; padding: 10px; }

在 bootstrap之后声明的样式表中，覆盖然后如下：

hr{ border: none; padding: 0; }

编辑补充：

根据回复，如果它是特定的HR标签（但不是全部），请给特定的一个类：

<hr class="specialHr" />

并应用风格：

hr.specialHr{ border: none; padding: 0; }

Answer 3

您可以将班级设置为<hr/>并为其应用不同的样式。或者使用css：not（）选择器。

Answer 4

你做不到。

您必须显式覆盖每个CSS属性。

您还可以修改css文件以创建类（而不是将样式应用于所有标记）。但是，您必须在每个要应用样式的<hr>标记中明确声明此类（反转您的问题）

Answer 5

我建议你编辑Bootstrap CSS，这样你就需要添加一个类来获得BootStrap样式，例如<hr class="hr">

hr.hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

您还可以创建一个指定默认样式的类来覆盖Bootstrap。默认样式可能因浏览器而异，所以我猜你需要决定使用哪一种。我从Chrome中的用户代理样式表中获取了这个。

hr.hr {
    display: block;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    border-style: inset;
    border-width: 1px;
}

如果您选择并制作指定相同外观的CSS样式规则，则可以模仿该浏览器的默认样式。

Answer 6

只需为<ht>代码创建个人风格。

例如，要使<hr> 500像素宽使用：

<hr style="width:500px;" />

Answer 7

在代码末尾覆盖！important

例如

<hr style="width:200px" !important>

这将覆盖您的更改

Answer 8

方法很少...... 给出这个特殊的＆lt; hr /＆gt;一个类（或id）并在你的css中添加你的样式：

 <hr class="myspecialhr" />
<style>     
 .myspecialhr {height:5px;}
</style>

您还可以使用元素内联添加样式覆盖：

 <hr style ="height:5px;"/>

你可以“标记”这个＆lt; hr /＆gt;与该特定页面的父项的类或id。

 <div class ="page1">
  <hr />
 </div>
 <style>
  .page1 hr {height:5px;}
 </style>

最后，您可以使用CSS边框来实现布局目标，并替换页面中的

。

Answer 9

如果这比<hr>大，并且您需要取消使用许多样式，则可以将内容放入<iframe>。

Answer 10

我想您现在可以这样做：

hr {
  all: reset;
}

如何避免将CSS样式应用于特定元素

10 个答案: