Question

我正在建立一个joomla网站，我有一个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 {
    //...
}

为了简化这一点，我考虑用*替换数字，如果语句被视为shell命令，则可以使用*。结果将是：

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

不幸的是，这不起作用。那么CSS中的这类工作怎么样呢？

编辑：HTML-File看起来像这样，如果这很重要：

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

Answer 1

您可以尝试＆＃34;以＆＃34;开头CSS选择器。这将选择所有带有＆＃39; id＆＃39;以＆＃34; ext-gen＆＃34;。

开头

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

Answer 2

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>

简化CSS声明？

2 个答案: