Question

<!DOCTYPE html>
<html>
    <head>
        <style>
            .class1.class2 {
            background-color: yellow;
            }
        </style>
    </head>
    <body>

        <div class="class1 class2">
            <p>paragraph one</p>
            <p>paragraph two</p>
        </div>

    </body>
</html>

在一个元素中使用两个类然后使用多个类选择器设置样式是没有意义的，因为只能使用一个类选择器设置一个类吗？或者有什么我不明白的东西？

Answer 1

这样做的两个主要论据是可重用性和双类选择器。使用一组可在多个场景中使用的小CSS类来设置框架。然后将它们的组合应用于您的元素，并在必要时将特定元素应用于可重用类尚未涵盖的一些其他样式。

我将举一个简单的例子来证明它：

.container {
  background: #eee;
  border: 1px solid orange;
  padding: 10px;
  margin: 10px;
}

.container.a-super-special-container {
  color: darkgreen;
}

.green {
  color: darkgreen;
}

<div class="container">
  This page is divided into several containers.
</div>

<div class="container">
  So let's use a class <i>.container</i> for styling all of them.
</div>

<div class="container a-super-special-container">
  This is a super special container. It builds upon the <i>.container</i> class and colors the text. Instead of copying all the definitions of the <i>.container</i> class we just reuse it.
</div>

<div class="container green">
  As an alternative to the classes used in the previous container we could use two reusable classes <i>.container</i> and <i>.green</i> and apply the styles of both of them.
</div>

Answer 2

不，这不是没有意义的。

您可能希望.class1.class2的样式与.class1和.class2的组合规则不同。
.class1.class2选择器为您的规则提供2个类而不是1个的特性，这样即使您的代码看起来像这样：

.class1 {
  ...
}
.class2 {
  ...
}
.class1.class2 {
  ...
}
.class3 {
  ...
}

... .class3值不适用于<div class="class1 class2 class3"></div>，即使它稍后由CSS解析，因为前一个选择器具有更大的特异性（2个类），但它将适用于只有两个类中的一个的元素（即<div class="class1 class3"></div>）。

这完全取决于您的使用案例。理想情况下，是的， 您应该尽可能地限制类 （id或任何其他选择器）的使用。

写作质量CSS的另一个经验法则是尽可能地限制选择器的特异性。

Answer 3

您对. CSS选择器的理解有误。

您可以查看this JSFiddle：

这是一个小例子

＆＃13;

.class1 {
  background-color: yellow;
}

.class1.class2 {
  background: red;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <div class="class1">
    <p>paragraph one</p>
    <p>paragraph two</p>
  </div>


  <div class="class1 class2">
    <p>paragraph one</p>
    <p>paragraph two</p>
  </div>
</body>

</html>

＆＃13;

第一个div只有一个类，class1，因此应用class1的样式

第二个div有两个类，即class1和class2，所以通过在css中使用.选择器，我们可以确保只有两个类的元素都被设置样式

如果您有.class1.class2，则说明的是选择包含class1和class2的元素并应用该样式。

什么是在一个元素中使用两个类的要点？

3 个答案: