时间戳

首页 > 解决方案 > 2个具有相同类名的css文件，并且具有该类名的元素具有两种样式

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 中定义的标志。

我看到我可以通过重命名徽标选择器的 1 来解决这个问题，或者我们可以更具体地使用 css 中的选择器。但是我们怎样才能使用相同的类名呢？为什么 login.jsx 可以在不导入的情况下使用 mainPageStyle.css 中的 logo 样式？

标签： javascripthtmlcssreactjs

解决方案

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

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

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

即使div.header样式被优先考虑，应用的样式也将是font-size: 25px; color: red

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

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

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

推荐阅读