html - 当一个类中有两个或多个类时，哪个类具有更高的优先级?

Question

div假设我在下面的示例中有两个类

.class1 {
      background-color: blue;
      border: solid black;
    }

.class2 {
      background-color: red;
      border: solid black;

    }

<div>
  <div class="class1 class2">
    This is red
  </div>
  <br>
  <div class="class2 class1">
    This should have been blue but its red
  </div>
</div>

关于哪个类优先，似乎没有任何规则。

为什么两个框在输出中都有红色背景？

标签： htmlcss

Answer 1

CSS 基于某些规则来应用冲突的样式。

在您的情况下，浏览器要解释的最后一个类class2（在第一个<div>和class1第二个中）是正在应用的类。

根据某些用例，此规则有一些例外。您可以单击此处阅读有关 CSS 特异性的更多信息。