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

我在HTML中使用

元素。在Bootstrap.css文件中，他们将一些样式应用于

标记。我不想将这些样式应用于我的

标记之一。我该怎么做呢？

只需为

标记创建一个单独的样式

例如，要使

500像素宽，请使用：

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

只需覆盖样式即可

假设引导适用于：

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

在引导后声明的样式表中，重写如下所示：

hr{ border: none; padding: 0; }

编辑添加：

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

<hr class="specialHr" />

---

您可以将类设置为

，并对其应用不同的样式。或者使用css:not（）选择器。

您不能这样做

您必须显式重写每个CSS属性

---

您还可以修改css文件以创建类（而不是将样式应用于所有标记）。但是，您必须在每个

标记中显式声明该类，您要在其中应用样式（解决您的问题）

假设您对包含hr的div有一个id

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

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

#hrVid hr
{
//oveeride property
}

---

您还可以在标记覆盖的末尾直接将id放入hr标记

！重要的

范例

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

---

这将覆盖您的更改

很少有方法。。。 给这个特定的

---

一个类（或id），并在css中添加您的样式：

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

还可以添加与元素内联的样式替代：

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

您可以使用该特定页面的父项的类或id“标记”该

---

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

.page1 hr{高度：5px；}

---

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

---

。

我建议您编辑引导CSS，以便您需要添加一个类以获得引导样式，例如

您还可以创建一个类，指定默认样式以覆盖引导。不同浏览器的默认样式可能不同，因此我想您需要决定使用哪一种。我从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样式规则来指定相同的外观，您可以模仿该浏览器的默认样式。

如果这比

更大，并且您需要取消使用许多样式，您可以将内容放在

中。我想您现在可以这样做：

hr{
全部：重置；
}

您能向我们展示CSS和HTML吗？覆盖该特定元素的应用样式。您可以自定义引导…但我需要其他hr元素使用这些样式，我只是想避免使用特定的hr标记，但我需要其他hr元素使用这些样式，我只是想避免使用特殊的hr标记。样式是通过样式表中的css应用的，而不是内联的。style属性将已为空。然后您可以使用选择器#hrDiv hr覆盖css属性，而无需了解OP的标记，为什么要将id放在父div上而不是hr上？您也可以这样做，但出于良好实践的考虑，我通常会避免这样做。添加新标记如何比将类应用于实际要设置样式的元素更好？只是膨胀会破坏页面的结构，我看不到任何好处。内联css是在标记中定义的（而不是像js那样动画），这被认为是非常糟糕的做法（因为它打破了关注点的分离）！重要信息也很容易被滥用，而这不是使用它的理由。退房

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

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;
}

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;
}