CSS 两个CSS文件定义相同的类

在本文中，我们将介绍当两个CSS文件定义相同的类时，浏览器如何处理以及如何正确处理重复类的方法。

阅读更多：CSS 教程

CSS文件引入

在网页中，我们通常会引入一个或多个CSS文件来对网页进行样式设置。通过<link>标签或@import规则，我们可以将外部CSS文件引入到HTML中。当一份HTML文件引入了多个CSS文件时，浏览器会按照引入顺序依次读取并应用CSS样式。

两个CSS文件定义相同的类

现在假设我们有两个不同的CSS文件，它们都定义了相同的类名。例如，style1.css文件中定义了类名为”box”的样式，而style2.css文件也同样定义了”box”这个类的样式。当网页同时引入了这两个CSS文件时，根据浏览器读取CSS的顺序，最终应用的样式将会是哪一个呢？

根据CSS规范，当两个CSS文件定义了相同的类名时，后面被加载的CSS文件会覆盖前面的样式。也就是说，如果我们先引入了style1.css，后引入了style2.css，那么最终生效的样式将是style2.css中定义的样式。

举个例子

为了更好地理解，我们来看一个具体的例子。

style1.css 文件中的样式定义如下：

.box {
  color: blue;
}

style2.css 文件中的样式定义如下：

.box {
  color: red;
}

假设我们先引入了style1.css，后引入了style2.css。那么无论设置box类的元素是什么，它们最终都将显示为红色（color: red），因为style2.css在后面被加载，覆盖了style1.css中的样式。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <div class="box">Hello, world!</div>
</body>
</html>

解决重复类的方法

如果我们希望两个CSS文件中定义的相同类名的样式都生效，我们可以使用不同的方法来避免冲突。

方法一：重命名类名

最简单的方法是为其中一个CSS文件中的类名添加前缀或后缀，以区分与另一个文件中的类名。例如，我们可以将style1.css中的类名改为”box-style1″，而style2.css中的类名保持不变为”box”。这样，两个类名就不会冲突，各自的样式都能够生效。

方法二：使用作用域选择器

另一种方法是使用作用域选择器，如BEM规范。BEM代表块（Block）、元素（Element）、修饰符（Modifier），通过使用块级和修饰符来确保样式不会互相干扰。

例如，我们可以将style1.css中的类名改为”box__element”，而style2.css中的类名也改为”box__element”。这样，每个样式都将应用于特定的块或元素，避免了冲突。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <div class="box">
    <div class="box__element">Hello, world!</div>
  </div>
</body>
</html>