javascript - 2 个具有相同类名的 css 文件，具有该类名的元素具有两种样式

Question

我有一个 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 并使用了如下标志类:

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

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

我知道我可以通过重命名 Logo 选择器的 1 来解决这个问题，或者我们可以使用 css 中的选择器来更具体。 但是我们如何使用相同的类名呢？为什么login.jsx不用导入就可以使用mainPageStyle.css中logo中的样式？

Answer 1

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

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

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

即使优先考虑 div.header 样式，应用的样式也会是 font-size: 25px;颜色:红色

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

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

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