如何将相同的声明应用于许多不同的对象？答案

【问题标题】：how to apply same declaration to many different objects?如何将相同的声明应用于许多不同的对象？
【发布时间】：2017-03-18 11:48:09
【问题描述】：

我正在对 CSS 进行一些修改，以在新布局中适应我们的旧模板基础架构。我们的菜单处于“活动”状态，对应于我所在的部分。

为了实现这一点，我写道：

div#left-col ul li.cidades.Cidades a, div#left-col ul li.amizade.Amizade a, div#left-col ul li.encontros.Encontros a,div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

但它只是不起作用！该样式仅应用于其中一个元素。我最终编写了这段代码来纠正这个问题：

div#left-col ul li.cidades.Cidades a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.amizade.Amizade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.encontros.Encontros a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

但我不明白问题所在，也不明白解决方案....

编辑：这是我尝试应用此样式的 HTML 代码：

<div id="left-col">
<ul>
<li class="amizade Idade"><a href="#">Amizade</a></li>
<li class="cidades Idade"><a href="#">Cidades</a></li>
<li class="encontros Idade"><a href="#">Encontros</a></li>
<li class="idade Idade"><a href="#">Idade</a></li>
</ul>
</div>

请注意，我希望仅在类中出现 2 个重复单词时应用样式。

编辑 2：

我通过将正确的声明（有许多元素后跟逗号的声明）移到这个声明之上解决了这个问题：

div#left-col ul li a{outline: 0px dashed red;display:block; background:transparent url(menu-esq-a.png) no-repeat scroll 0px -4px; height:22px; padding:8px 0 0 23px; margin:0; font-family: Arial, Sans-serif; font-weight: bold; font-size: 14px; text-decoration:none; color:#00574a}

这应该是我的“默认”状态。很奇怪，因为我认为最具体的声明会胜过次要的声明。

【问题讨论】：

您还需要发布 HTML。
你漏掉了div#left-col ul li.idade.Idade a。
为我工作jsfiddle.net/gjrJj（根据您的 css 规则创建的 html）。
CSS 与您提供的 HTML 不对应——例如，在 CSS 中它是 li.cidades.Cidades，而在 HTML 中它应该是 li.cidades.Idade。此外，由于 Idade 类对所有元素都是通用的，因此您可以只使用选择器 div#left-col ul li.Idade，它会匹配所有内容。

标签： html css css-selectors

【解决方案1】：

您已经有一个应用于所有项目的common css 类（它是Idade，它是每个元素class 属性的一部分）。

这意味着只为该类声明样式就足够了（并且建议）：

div#left-col ul li.Idade {
   display:block;
   background:transparent url(/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
   color:white;
   width: 166px;
}

附带说明，一个不同的名称可能更适合于一个通用类，因为只有一个元素的内容与该名称匹配。像 menuItem 这样的名称将比 Idade IMO 更具描述性。

【讨论】：