如何将不同的 CSS 添加到相同的 HTML 标签中？答案

【问题标题】：How to add different CSS to the same HTML tags?如何将不同的 CSS 添加到相同的 HTML 标签中？
【发布时间】：2014-10-30 22:30:41
【问题描述】：

所以我想要一个水平规则<hr>，使用 CSS 填充 50 像素。但是，我已经将自定义 CSS 分配给 <hr> 标记，该标记已经具有 padding-bottom:25px; padding-top:100px; padding-left:50px; padding-right:50px; 用于将页脚与主要内容分开。那么我如何才能为同一个元素实现两种不同的 CSS 样式呢？

附：我正在使用 Twitter Bootstrap 3

【问题讨论】：

使用不同的类？这是基本的东西......还是我错过了什么？
如果是基本的东西呢？如果他需要帮助，我们应该给他...

标签： html css twitter-bootstrap-3 padding

【解决方案1】：

有很多不同的方法可以将不同的 CSS 添加到不同的 HTML 元素。我们主要使用 ID 和类，在W3Schools website 上阅读更多关于 ID 和类的信息，我一直都在使用它。下面是一个同时使用 ID 和类系统来设置 CSS 样式的示例：

HTML：

<p class="coolclass">This is the cool class</p>
<p class="redclass">This is the red class</p>
<p id="strangeid">This is the strange ID</p>

CSS：

.coolclass{
    color: blue;
}
.redclass{
    color: red;
}
#strangeid{
    background-color: green;
    color: white;
}

这是一个活生生的例子：http://jsfiddle.net/Xanco/8sex7x3p/

带有 HR 样式的新实例：http://jsfiddle.net/Xanco/8sex7x3p/2

【讨论】：

我尝试为 hr 使用新的 CSS 类，但似乎没有用。让我再试一次。
没关系，我们都得从某个地方开始...我已经更新了 JSFiddle，它现在是 2 小时的样式：jsfiddle.net/Xanco/8sex7x3p/2如果您还有任何问题，请随时发表评论。

【解决方案2】：

那么让我把它简单化.. 给它一个id 并设置相应的样式

See it here

【讨论】：

【解决方案3】：

对于这个元素，你可以像这样向你的<hr> 添加一个新类：

<hr class="actualClass newClass">

使用这个 CSS：

.newClass {
    padding: 50px !important;
}

【讨论】：

【解决方案4】：

经过这么长时间，我实际上找到了我想要的答案。

基本上我做了以下事情：

hr.custom {
margin: 10px;
etc...
}

然后我用了：

<hr class="custom">

【讨论】：