是的,当然了。一个 CSS 规范可能有多个目标。要将相同的规则定位到 class 和 id,只需执行以下操作:
#charlieID, .alphaClass {
font-size: small;
color: lime;
}
注意分隔目标的逗号。
补充回答:
如果您有数十万个 id 要匹配,那么这个标准方法(不需要额外的脚本或库,只需常规 CSS)实际上比任何可能的替代方法都要小。考虑:
/* Standard CSS */
#charlieID1, #charlieID2, #charlieID3, #charlieID4, #charlieID5,
#charlieID6, #charlieID7, #charlieID8, #charlieID9, #charlieID10,
#charlieID11, #charlieID12, #charlieID13, #charlieID14, #charlieID15,
#charlieID16, #charlieID17, #charlieID18, #charlieID19, .alphaClass {
font-size: small;
color: lime;
}
并将其与:
/* LESS CSS. Needs to be compiled with LESS */
.alphaClass {
font-size: small;
color: lime;
}
#charlieID1 {
.alphaClass
}
#charlieID2 {
.alphaClass
}
#charlieID3 {
.alphaClass
}
#charlieID4 {
.alphaClass
}
#charlieID5 {
.alphaClass
}
#charlieID6 {
.alphaClass
}
#charlieID7 {
.alphaClass
}
#charlieID8 {
.alphaClass
}
#charlieID9 {
.alphaClass
}
#charlieID10 {
.alphaClass
}
#charlieID11 {
.alphaClass
}
#charlieID12 {
.alphaClass
}
#charlieID13 {
.alphaClass
}
#charlieID14 {
.alphaClass
}
#charlieID15 {
.alphaClass
}
#charlieID16 {
.alphaClass
}
#charlieID17 {
.alphaClass
}
#charlieID18 {
.alphaClass
}
#charlieID19 {
.alphaClass
}
这只是 19 个 ID。
然而,有一个更好的解决方法。如果您确实有数十万个可能的 id,那么针对这些 id 可能是错误的做法。相反,您应该真正查看文档的结构,看看您想要定位的东西是否可以通过其他方式定位。
一种替代方法是根据事物的父对象编写目标。例如,如果您有这样的结构:
<div class='foo'>
<span id='charlieID'></span>
</div>
然后你可以像这样定位它:
div.foo span, .alphaClass {
font-size: small;
color: lime;
}
创造性地寻找可以定位的常见结构。您还可以使用其他技巧,例如使用子选择器或兄弟选择器。我强烈建议至少阅读一篇高级 CSS 教程。但请注意,一些较旧的浏览器不支持一些更有用的规则。不过,既然您提到 CSS3,您可能还是针对较新的浏览器。
如果一切都失败了,没有什么可以说您不能生成 CSS 文件而不是手动输入它:
#! /usr/bin/env tclsh
# Sample script to print rule with thousands of target.
# (note: I have no idea what thousands of targets do to various browsers)
set targets {}
foreach {name idx} {"#charlie" 1000 ".alphaClass" "" "#jane" 500} {
if {$idx == ""} {
lappend targets $name
} else {
for {set i 0} {$i < $idx} {incr i} {
lappend targets "$name$i"
}
}
}
puts [join $targets ","]
puts "{font-size:small; color:lime;}"
# should print a rule with the following targets:
# #charlie0..#charlie999, .alphaClass and #jane0..#jane499