Question

我有3个带有这些类名的svgs，并希望选择它们。

.call-to-action__volunteer-icon, .call-to-action__register-icon, .call-to-action__find-polling-icon

页面上还有其他元素使用'call-to-action__'，因为这是BEM方法的一部分所以我不能只使用 SVG [类* =“呼叫性用语”]。

Answer 1

您可以将属性选择器链接在一起以制作更长的选择器，这是我可能会做的。像这样：

svg[class*="call-to-action"][class$="-icon"]

将SVG与包含＆＃34;号召性用语＆＃34;的类名相匹配和以＆＃34; -icon＆＃34;。

结尾

如果需要，您可以继续链接以制作更长更长的选择器，以便只获得您想要的选择器。假设页面上有一些其他SVG，其中包含类似.call-to-action__unique1-icon和.call-to-action__unique2-icon的类，它们与上面的选择器相匹配，但您不希望将SVG包含在＆＃34;独特＆＃34;作为他们班级名称的一部分。

在这种情况下，您可以将:not()堆叠到最后，如下所示：

svg[class*="call-to-action"][class$="-icon"]:not([class*="unique"])

Answer 2

试试这个：

svg.call-to-action__volunteer-icon, svg.call-to-action__register-icon, svg.call-to-action__find-polling-icon, {
  /* enter rules here... */
}

使用逗号分隔多个规则将链接它们，将所有规则应用于它们。

执行svg.class选择所有带有“class”类的svg元素。

我怎么能写一个css选择器来选择3个元素，类名只有一个区别

2 个答案: