Question

Bootstrap在bootstrap.css文件中定义了以下内容：

.form-control {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

我想创建一个完全相同的样式，但宽度不是100％。而且，如果.form-control中的任何内容发生变化，我想确保它反映在我的新风格中。这非常像我想要一个从.form-control派生的新风格，但是我在新风格中指定了更改。 CSS是否具有支持此功能的语法？

Answer 1

您可以为元素提供两个类，然后设置第二个类来覆盖第一个类。这样的事情应该有效：

<div class="form-control other-class"></div>

然后创建一个新的CSS规则：

.form-control.other-class{
    width: auto;
}

以下是其中的一个小提琴：http://jsfiddle.net/xu46ed26/

Answer 2

.form-control, .my-other-class {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.my-other-class {
    other : rule;
}

我可以创建基于其他样式的样式吗？

2 个答案: