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

Question

我在HTML中使用了<hr />元素。在Bootstrap.css文件中，他们对<hr />标签应用了一些样式。但我不想将这些样式应用于其中一个<hr />标签。我该如何做到这一点？

- user3191903

---

你能展示一下CSS和HTML吗？ - Siyah

覆盖应用于该特定元素的样式。 - Hashem Qolami

您可以自定义您的Bootstrap... - Mr. Alien

但是我需要那些样式用于其他 hr 元素，我只想避免它应用到特定的 hr 标签。 - user3191903

Answer 1

假设您有一个id用于包含hr的div。

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

为了去掉样式，您可以使用 removeAttr 属性覆盖选择器。

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

如果您没有使用内联样式，则需要在CSS中覆盖属性。

#hrVid hr
{
//oveeride property
}

您也可以直接将id放置到hr标签中。

- Ankur Aggarwal

---

样式是通过样式表中的 CSS 应用的，而不是内联的。样式属性已经为空了。 - StuperUser

然后，您可以使用选择器#hrDiv hr覆盖CSS属性。 - Ankur Aggarwal

不了解 OP 的标记语言，为什么要将 id 放在父 div 上而不是 hr 上呢？ - StuperUser

你也可以这样做，但出于良好的实践原则，我通常会避免这样做。 - Ankur Aggarwal

添加新标记相比于将类应用于实际要样式化的元素有何优势？这只是会增加页面的冗余代码，可能会破坏页面的结构，我看不到任何好处。 - StuperUser

Answer 2

只需覆盖样式即可。

假设Bootstrap应用了以下样式：

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

在引入bootstrap之后的样式表中，可以通过以下方式进行覆盖：

hr{ border: none; padding: 0; }

编辑补充:

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

<hr class="specialHr" />

并应用样式：

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

- Pat Dobson

---

但是我需要那些样式用于其他hr元素，我只想避免它应用于特定的hr标签。 - user3191903

Answer 3

我建议您编辑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样式规则来指定相同的外观，那么您可以模拟浏览器的默认样式。

- Mathias

Answer 4

你可以为 <hr/> 设置一个类，并应用不同的样式。或者使用 CSS 的 :not() 选择器。

- MarcelB.

Answer 5

你不能这样做。

你必须明确地覆盖每个CSS属性。

你也可以修改你的CSS文件来创建一个类（而不是应用于所有标签的样式）。但是，你必须在每个<hr>标签中明确声明这个类，以便应用样式（解决了你的问题）。

- Julien

Answer 6

为<hr>标签创建个性化样式。

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

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

- Dustin Cook

Answer 7

在标签末尾使用 !important 进行覆盖。

例如：

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

这将覆盖您所做的更改

- Anusha kurra

---

内联 CSS 定义在标记中（而不是例如动画的 JS 中）被认为是相当糟糕的做法（因为它破坏了关注点分离）。!important 也很容易被滥用，这并不是使用它的情况。请查看 http://css-tricks.com/when-using-important-is-the-right-choice/。 - StuperUser

Answer 8

有几种方法可以实现这个目标... 给这个特定的 <hr/> 添加一个类（或id），并在你的CSS中添加你的样式：

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

你也可以在元素内联添加样式覆盖：

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

您可以使用该页面的父级项目的类或ID来“标记”此 <hr/>。

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

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

---

。

- Sbpro

Answer 9

我认为你现在可以做到这一点：

hr {
  all: reset;
}

- pixelearth

Answer 10

如果这是比 <hr> 更复杂的东西，并且您需要取消使用许多样式，您可以将内容放在 <iframe> 中。

- Jakub Vrána