Question

我做了一个按钮：

<input type="button" class="btn-custom btn btn-info" />

CSS代码

.btn-info {
  background-color: #6fb3e0!important;
  border-color: #6fb3e0;
}
.btn{padding:5px 10px}
.btn-custom{height:20px;}

我希望在名为btn-custom的单个班级中结合btn btn-info和.btnCustom的样式。

简而言之，我想要的结果与我尝试时相同：

<input type="button" class="btnCustom" />

Answer 1

你可以这样试试 -

＆＃13;

.btnCustom, .btn-info {
   background-color: #6fb3e0!important;
   border-color: #6fb3e0;
}
 .btnCustom ,.btn{
   padding:5px 10px;
 }
 .btnCustom ,.btn-custom{
   height:20px;
 }

＆＃13;

<input type="button" class="btnCustom"/>

＆＃13;

Answer 2

您可以像这样使用Css，

.btnCustom, .btn-info {
   background-color: #6fb3e0!important;
   border-color: #6fb3e0;
}
 .btnCustom ,.btn{
   padding:5px 10px;
 }
 .btnCustom ,.btn-custom{
   height:20px;
 }

和Html

<input type="button" class="btn-custom btn btn-info" />

它在我的网站上的工作。

Answer 3

您好现在尝试 less css，而不是像这样在一个类中定义这些类

尝试这种方式

.btnCustom{
.btn();
.btn-info(); 
height:20px;
}

Answer 4

您需要预处理器，例如less或sass

.class1 {
  color: #333;
}

.class2 {
  @extend .class1;
  border-color: green;
}

否则你必须坚持

<input type="button" class="btn-custom btn btn-info" />

Answer 5

您实际上可以将所有类组合成一个选择器，如此;

.btn-custom.btn.btn-info {
}

那只会选择所有这些类的元素。

You can read more about that selector at css-tricks.

这会做你想做的吗？

还有一些其他好的答案。使用less或sass可能会做你想要的。

Be careful with how you use commas in your selectors.

Answer 6

您需要使用一些预处理器，例如 less 或 sass 。（你也可以使用普通的CSS。只需使用SASS / SCSS代码中的Generated CSS代码。）

使用sass你可以这样做：

HTML代码

<input type="button" class="btnCustom" />

SASS / SCSS代码

.btn-info {
  background-color: #6fb3e0!important;
  border-color: #6fb3e0;
}

.btn{
  padding:5px 10px
}

.btn-custom{
  @extend .btn;
  @extend .btn-info;
  height:20px;
}

编译SASS / SCSS代码后生成的CSS代码

.btn-info, .btn-custom {
  background-color: #6fb3e0!important;
  border-color: #6fb3e0;
}

.btn, .btn-custom{
  padding:5px 10px
}

.btn-custom{
  height:20px;
}

当然，如果您不想使用任何预处理器，您可以直接使用编译后生成的CSS代码。

如何在单个类中调用多个类的CSS？

6 个答案: