Html 如何在一个类中调用多个CSS类？

我做了一个按钮：

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

我想在一个名为.btnCustom的类中结合btn自定义和btn btn信息的样式

简而言之，我希望得到与我尝试此操作时相同的结果：

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

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

而不是试图这样做

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

---

你可以这样试试-

.btnCustom、.btn信息{ 背景色：6fb3e0！重要； 边框颜色：6fb3e0； } .btnCustom、.btn{ 填充物：5px10px； } .btnCustom、.btn自定义{ 高度：20px； }

---

您需要一个预处理器，例如或

否则你就得坚持

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

---

实际上，您可以像这样将所有类组合到一个选择器中

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

这将只选择包含所有这些类的元素

这能满足你的要求吗

还有其他一些好的答案。使用较少或sass可能会实现您想要的功能

---

您需要使用一些预处理器，如less或sass。您也可以使用普通CSS。只需使用从SASS/SCSS代码生成的CSS代码

使用sass，您可以执行以下操作：

HTML代码

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

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

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

.btn{
  padding:5px 10px
}

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

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

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

.btn-custom{
  height:20px;
}

---

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

您可以像这样使用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" />

---

它在我的网站上起作用。

是什么阻止你在html中包含这些类？你为什么要这样做？你将有另一节课要思考和记住。您的CSS将变得更复杂，更容易出现错误。不久之后，您将被诱惑使用CSS预处理器，因为它的扩展功能看起来很酷，您肯定会后悔。但除此之外，阅读HTML的人更难看到发生了什么。在设计CSS时，使用较小的类（每个类做一件事，就像.btn info等现在所做的那样），并在HTML元素上指定多个类作为组合类行为的一种方式，这是非常普遍的做法。我个人并不后悔使用预处理器或使用extends。他们可以是一个伟大的方式来组织代码，他们是为我。指定多个类通常是有效的，但使用边界元法和超目标元素是另一种方法，对于大型可伸缩应用程序尤其有效。不止一种方法@torazaburo.Yes，但是不同的方法有不同的优点和缺点。例如，涉及HTML和CSS过度紧密耦合的方法在应用CSS时可能会获得几微秒的时间，但这意味着每次你擤鼻涕时，你都在两个地方进行更改。这不是他所要求的。@torazaburo它可以做他想做的事，因此我为什么说它可以做你想做的事？-downvote有点麻烦不，他不需要预处理器。他需要基本的CSS常识。他问了一个问题，我回答了。

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

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