为什么在 html 中使用多个 类？

Question

我是编程新手，我不明白为什么我们要在HTML中使用多个classes。我的意思是无论如何，即使它是一个 class 或多个 class，所有 CSS 样式将仅适用于相同的 content/text，那么多个有什么用class当一个 class 会做同样的事情时？

Answer 1

它使您能够在需要相似特征的地方重复使用 类。如果为每个元素单独编写样式，将会有很多重复代码

Answer 2

您使用多个 类 让您的代码保持干爽（不要重复自己）例如，假设您有两个按钮，蓝色主按钮和红色辅助按钮。

.red-button {
  background-color: red;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

.blue-button {
  background-color: blue;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

这里你重复了css。

有了多个 类 你可以做类似

.button {
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

.button.red {
  background-color: red;
}

.button.blue {
  background-color: blue;
}

Answer 3

A class 是一种将元素标记为组的一部分的方法。一个东西可以属于多个组。

.agent {
    background: #afa;
    margin: 5px;
    padding: 5px;
    width: 10em;
    list-style: none;
}

.double-agent {
    background: #faa;
}

<ul>
  <li class="agent">Edger Raven</li>
  <li class="agent">Simon Sly</li>
  <li class="agent double-agent">Sergei Skripal</li>
  <li class="agent double-agent">Belgian Butcher</li>
  <li class="agent">Jack the Mechanic
  </li>
</ul>

Answer 4

我想你想问这个：

.a{
   height:20px;
   width:50px;}

.b{background:red;}

<div class="a b"></div>

为什么我使用 "a" 和 "b" 而不是只使用 "a" 并在 .a{}

中应用 .b{} 的代码

考虑这个案例：

.head{font-size:50px;}
.green{color:green;
       margin:100px;}

<p class="head">This is an example</p>
<p class="head green">Hello World!</p>
<p class="green">i love maths</p>
<p class="green">3+3=3!</p>

所以我想让一些内容变绿，一些内容变大。 "Hello World!" 行两者都有。这就是为什么我使用了 2 个不同的 类，所以我不必为 "Hello World!"

重复相同的代码

我给出的例子是一个非常蹩脚的例子，但是是的，你将不得不使用多个 类 这样你就可以对 [=42] 中的其他标签使用相同的 CSS 代码=] 无需重复代码。