简化CSS声明？

我正在构建一个joomla网站，我遇到了一个CSS语句的问题。该网站使用了几个不同名称的菜单。正因为如此，我会做这样的事情：简化CSS声明？

a#ext-gen1.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen2.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen3.ux-menu-link-level-0.ux-menu-link-parent.current, 
a#ext-gen4.ux-menu-link-level-0.ux-menu-link-parent.current { 
    //... 
}

为了简化这个问题，我想用*，如果该语句像贝壳指令处理该会的工作更换的数字。结果会是这样的：

a#ext-gen*.ux-menu-link-level-0.ux-menu-link-parent.current {  
    //... 
}

不幸的是，这是行不通的。那么CSS在CSS中的工作方式如何呢？

编辑：HTML的文件看起来是这样的，如果是重要的：

<a href="./some/link.html" class=" ux-menu-link-level-0 current ux-menu-link-parent " title="" id="ext-gen5"> 
some text 
</a>

来源

2014-10-18 Exceen

为什么不仅选择类？ '.ux-menu-link-level-0.ux-menu-link-parent.current { ... }' – xjedam 2014-10-18 13:19:32

因为这是行不通的。我需要告诉样式表，它是一个链接。在你的例子中，缺少“a”。 – Exceen 2014-10-18 13:26:10

不知道为什么它不起作用，但可以添加'a'选择器：'a.ux-menu-link-level-0.ux-menu-link-parent.current {...}' – xjedam 2014-10-18 13:31:43

您可以尝试在“开始” CSS选择器。这将选择所有具有以“ext-gen”开头的“id”的元素。

a[id^="ext-gen"] {}

来源

2014-10-18 13:20:49 Rob

我真的不知道如何正确实现这一点，如果我只是复制并粘贴这个，它不起作用。 – Exceen 2014-10-18 13:26:51

@Exceen编辑CSS的原因我没有使用你的确切起始编号名称。 – Rob 2014-10-18 13:28:46

这可能会被某些ID选择器覆盖，因为它具有较少的特定性。 @Exceen你应该使用你的浏览器的开发工具，看看是否是这种情况 – 2014-10-18 13:43:07

a.ux-menu-link-level-0.ux-menu-link-parent.current{}应该没问题。

div.b { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
} 
 
div#d1 { 
 
    background: red; 
 
}

<div class="b" id="d1"></div> 
 
<div class="b" id="d2"></div>

来源

2014-10-18 13:33:40 DividedByZero

是的，我知道它*应该*工作，但它不。我真的不知道为什么...... – Exceen 2014-10-18 13:37:45

简化CSS声明？

回答

相关问题