Question

我想知道如何扩展CSS并为其添加更多属性。例如：

<a title="Not clickable" class="pull-right btn"><span class="icon"></span></a>

上面的代码行使用bootstrap css定义的pull-right btn。现在，我不想修改那个特定的类，因为我将它用于许多其他控件。我知道我可以复制这些属性并创建另一个类并将其用于此特定锚标记。

相反，有没有什么方法可以扩展该类，并在我的页面的<style>标记中添加更多属性。

Answer 1

是的，你可以通过提及父 的类或 id 来扩展课程 >类

它将仅应用于那些将在该父类或id下的类。它将具有高优先级。

.<parentClass> .pull-right{ <css properties> }

OR

#<parentId> .pull-right{ <css properties> }

Answer 2

您可以使用内联css或添加类或将类放在其他css中或使用其父类定位该类来执行此操作。

注意：！important 用于覆盖CSS

＆＃13;

.clear {
  clear: both;
  margin: 20px;
}
.red {
  background-color: red;
  padding: 10px;
}
#some-div > .pull-right {
  margin-right: 100px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<!--Normal Button-->
<button class="btn btn-sm pull-right">Normal Button</button>
<!--End of Normal Button-->

<div class="clear"></div>

<!--Button with an extra class-->
<button class="btn btn-sm pull-right red">Button Red</button>
<!--End of Button with an extra class-->

<div class="clear"></div>

<!--Button with inline CSS-->
<button class="btn btn-sm pull-right" style="margin-right:20px;float:left!important;">Normal Button with inline style</button>
<!--End of Button with inline CSS-->

<div class="clear"></div>

<!--Button inside some div -->
<div id="some-div">
  <button class="btn btn-sm pull-right">Normal Button inside div</button>
</div>
<!--End of Button inside some div-->

＆＃13;

以下是fiddle

示例

扩展Bootstrap CSS并添加更多样式

2 个答案: