Javascript 2个具有相同类名的css文件，并且具有该类名的元素具有这两种样式

我有一个css文件mainPageStyle.css，带有选择器徽标：

.logo{
    position: absolute;
    left: 3%;
    border-radius: 5%;
}

我有另一个css文件landingPageStyle.css，带有选择器徽标，但更具体：

.container .content .logo {
  width: 21em;
}
.container .content .logo img {
  width: 40%;
  height: 40%;
  border-radius: 5%
}

在我的login.jsx中，我只导入landingPageStyle.css，并使用logo类，如下所示：

<div className="logo">
   <img src={myLogo} alt="login"/>
</div>

图像将在徽标选择器中应用这两种样式。 这怎么会发生？我只想在landingPageStyle.css中定义徽标

我想我可以通过重命名logo选择器中的1个来解决这个问题，或者我们可以在css中更具体地使用选择器。

---

但是我们怎么能使用相同的类名呢？为什么login.jsx可以使用mainPageStyle.css中logo中的样式而不导入？

css样式只覆盖冲突属性，而不是整个样式-也就是说，如果您有冲突样式，例如：

.header {
  font-size: 18px;
  color: red;
}

div.header {
  font-size: 25px;
}

即使对

div.header

样式进行了优先级排序，应用的样式也将是

font size:25px；颜色：红色

虽然重命名可能是处理此问题的最佳方法，但您也可以将属性设置为其默认值-最好检查上的属性以查看它们应该是什么

因此，您可以将landingPageStyle.css更改为：

.container .content .logo {
  width: 21em;
  position: static;
  left: auto;  /* Not needed because position is static */
  border-radius: 0;
}

---

这可能会有帮助。添加！重要信息将覆盖其他值，但不建议使用

当然，只有在mainPageStyle.css之后加载landingPageStyle.css时，这才起作用

.container .content .logo {
  width: 21em;
  position: static; /* or relative */
  left: auto;
  border-radius: 0;
}
.container .content .logo img {
  width: 40%;
  height: 40%;
  border-radius: 5%
}

---

解决此问题的一种方法是在更具体的规则中使用属性的默认值覆盖属性。是的，我们可以在css选择器中更具体。因此，如果我们可以在css中引用类名而不导入它，那么导入css的意义是什么呢？您不必指定类名来在css中使用它-您不会有任何异常，它只会在该类出现时应用。导入CSS主要是为了保持代码的条块化，或者如果您从其他人/地方导入样式表