Question

我想要做的是创建默认的css样式，当我将多个类组合在一起时，我想要覆盖另一个类的一些默认样式。这是我想要做的一个例子。

style.css

.navBar {
  position:absolute;
  left:0px;
  right:0px;
  width:100%;
  height:50px;
  background-color: #333333;
}
.fixed {
  position: fixed;
}
.top {
   top:0px;
}
.left {
  float:left;
  left:0px;
}   
.navBar .left {
  width: 50px;
  height:100%;
}

在我的html中如果我有<div class="navBar">那么它只会使用.navBar中的样式但是当我尝试<div class="navBar left">时，我希望它覆盖.navBar的宽度和高度但保留所有内容其他来自.navBar和.left

我不想把高度和宽度放在.left里面，因为我希望尽可能保持它的通用性。

Answer 1

使用CSS选择器.navBar.left。这将检查类navBar且类别为left的任何元素。目前您正在使用.navBar .left。它不检查元素是否同时具有两个类，而是检查具有left个孩子的navBar类的所有元素

Answer 2

你可能不应该像.fixed和.top这样的特定类。我建议你想象一下你想要样式的基类（即：你的navBar），然后添加其他类来修改它们（如左图）。阅读一下BEM（块，元素，修饰符）或任何其他方法，使CSS更加模块化，并尝试将其慢慢应用到CSS中。

你总是可以堆栈类来使它们更具体（优先级），比如.navBar.left或者在超级特定的类上使用！important，比如那些只设置一个属性的类，但过多地使用这些技术和你的CSS很快就会变得不稳定并且难以维持。

了解如何更好地构建和组织CSS。它会得到回报！

Answer 3

首先，不要用camelCase样式编写类名，它不适用于css，see why。

这是通过添加多个类来应用和扩展默认样式的示例，单击运行代码剪切以查看其实际操作

html, body{
  margin: 0;
}
.nav-bar {
  position:absolute;
  top: 100px;
  width:100%;
  height:50px;
  background-color: #AC92EC;
  text-align: center;
}
.fixed {
  position: fixed;
  background-color: #A0D467;
}
.top {
   top:0;
}
.left {
  left:0;
   width: 200px;
  background: #48cfad;
}

<div class="nav-bar">
  defualt navbar  
</div>

<div class="nav-bar left">
  left navbar
  </div>

<div class="nav-bar fixed top">
  fixed and top navbar
</div>

在一起使用两个css类时更改样式

3 个答案: