Question

是否可以使用相同的css制作两个div，例如：

.Navig1, .Navig11 a {
  display: block;
  height: 15px;
  width: 70px;
  background-color: {color: Navig Bg 1};
  text-align: center;
  font-size: 8px;
  line-height: 15px;
  color: #FFF;
}

因为我不希望我的样式代码太长，我需要这两个看起来相同，但是在悬停时会有所不同，我认为这样做，但这段代码不起作用。我在哪里弄错了？

Answer 1

是的，有可能：

.Navig1 a, .Navig11 a {
  display:block;
  height:15px;
  width:70px;
  background-color:#000;
  text-align:center;
  font-size:8px;
  line-height:15px;
  color:#FFF;
}

.Navig1 a:hover {
  /*css property*/
}

.Navig11 a:hover {
  /*other css property*/
}

Answer 2

css不是“可编程的”。没有变量或方法可以说“在这里使用X节中包含的风格”。

但是，你可以通过从这个块中删除bgcolor定义并创建一个新的

来修复它

.Navig1, .Navig11 a {
    ... as before ...
}

.Navig1, .Navig11 {
    background-color: #xxx;
}

Answer 3

你可以做你想做的事：

.Navig1, .Navig11 a {
    /* Common Styles */
}

.Navig1:hover {
    /* Navig1 Specific Styles on Hover */
}

.Navig11 a:hover {
    /* Navig1 a Specific Styles on Hover */
}

但是，正如其他回答者提到的那样，你已经打破了CSS。应该怎样进行背景颜色？

Answer 4

如果你还提供html，那么找出你想要实现的目标会更容易。没有必要有两个CSS类。您可以使用单个CSS类为页面上的多个元素设置样式。

如果您有多个div容器，其中包含两个名为mynav的类：

<div class="mynav"></div>
<div></div>
<div class="mynav"></div>

然后一个CSS类将影响两者。

div.mynav a {
    display: block;
    height: 15px;
    width: 70px;
    text-align: center;
    font-size: 8px;
    line-height: 15px;
    color: #fff;
}

div.mynav a:hover {
    /* new css */
}

如果您希望有变体，那么您只需要根据您正在执行的操作创建元素如何变化的规则。

如果需要，还可以考虑为单个元素使用多个类。你的div可能是：

<div class="mynav someotherclass"></div>

您可能会发现，对于您正在做的事情，一些简单的Javascript是最佳解决方案。

两个div相同的CSS？

4 个答案: