html - 选择多个 CSS id，每个 CSS id 仅更改 1 个数字

Question

我有一个问题，我试图选择多个 CSS 类/ID。

我的主题调用多个按钮的方式是将 +1 添加到按钮 ID，如下所示：

edit-add-to-wishlist
edit-add-to-wishlist--1
edit-add-to-wishlist--2
edit-add-to-wishlist--3
etc

我希望使上述按钮全部向右浮动，而不必在 CSS 中单独命名和创建每个 id。

我尝试使用该nth:child选项以及*通用选择器，但没有取得多大成功。

是否可以选择多个范围（我猜你会这样称呼它）？

像这样的东西：

#edit-add-to-wishlist--* {
    float: right;
}

Answer 1

您可以使用属性选择器[attr*=value]：：

[id*=edit-add-to-wishlist] {
    color: red;
}

jsFiddle在这里- 它的工作原理

它选择 aid包含的所有实例edit-add-to-wishlist

[属性*=值]

表示属性名称为 attr 且其值包含至少一次出现的字符串“value”作为子字符串的元素。

关于属性选择器的 MDN 文档

Answer 2

button[id^=edit-add-to-wishlist] {float:right}

<button id="edit-add-to-wishlist*>通过查找星号是通配符的位置来使用 CSS3 的子字符串匹配。