用于复杂ID的CSS通配符

Question

如果我有一个css选择器，例如#subtab-1, #subtab-2 etc

我可以将通配符选择器设为div[id^='subtab-']

但我无法弄清楚如何为选择器制作外卡，例如

#subtab-1-sub1, #subtab-1-sub2, `#subtab-1-sub2, #subtab-2-sub1, #subtab2-sub2, #subtab2-sub-3

等...你怎么能做div之类的东西[id ^ ='subtab- tab - ']（* =通配符）

Answer 1

如果我正确理解您的问题，您尝试选择ID为subtab-后跟数字的所有元素，后跟-sub后跟另一个数字。听起来您希望此选择器与#subtab-1不匹配，只有具有#subtab-1-sub1后缀的内容。

使用CSS无法做到这一点。 CSS不提供允许使用通配符的selector。然而，你可以将非常接近的东西放在一起。

可能有效的Hacky选择器

[id^="subtab-"][id*="-sub"]会匹配任何以subtab-开头并且ID中包含-sub的ID。这可能会起作用，但可能会导致#subtab-1-subtle或#subtab-something-sub2，#subtab-sub等内容出现误报。

另一个可能有效的hacky选择器

假设#subtab-?-sub?元素始终包含在#subtab-?个元素中且#subtab-?元素永远不能包含另一个#subtab-?元素，您可以使用{{3定位它们：[id^="subtab-"] > [id^="subtab-"]

依赖于课程

更好的解决方案可能会提供您尝试定位公共child combinator的所有元素，例如<div class="subtab-sub">，然后选择它们全部将为简单.subtab-sub。使用类也会比使用class产生更快的性能。

Answer 2

所有ID都以subtab开头，因此请使用

div[id^='subtab']

Answer 3

我不确定您是否希望使用以这种方式构建的ID作为解决HTML中元素的方法。我尝试使用subsubtab等类，您可以尝试使用nth-child伪类来单独处理子标记或子标记：

<div class="tabs">
   <div class="subtab">
     <div class="subsubtab">...</div>
     <div class="subsubtab">...</div>
     ...
   </div>
   <div class="subtab">
     ...
   </div>
</div>

然后，您的CSS看起来像

div.subsubtab { color: brown; }

或

div.subtab:nth-child(2) { border: 1px solid red; }

Answer 4

看看这个jQuery Selector
我认为它可行。