Question

我在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}

这应该是我的“默认”状态。很奇怪，因为我认为最具体的声明会赢得较小的声明。

Answer 1

您已经将常用 css类应用于所有项目（Idade，并且它是每个元素的class atttribute的一部分）。

这意味着足够（并推荐）为该类声明样式：

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更具描述性。

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

1 个答案: