1

如果我有一个 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
etc...

你怎么能做这样的事情：

div[id^='subtab-*tab-*'] (*=wildcard)
4

4 回答 4

12

If I am understanding your question correctly, you are trying to select all elements whose id starts with subtab- followed by a number, followed by -sub followed by another number. It also sounds like you want this selector to not match #subtab-1, only things that have a suffix like #subtab-1-sub1.

This cannot be done with CSS. CSS does not supply a selector that will allow wildcards. You can however hack something together that comes pretty close.

Hacky selector that might work

[id^="subtab-"][id*="-sub"] would match any id that starts with subtab- and also contains -sub somewhere in the id. This will probably work but could cause false positives on things like #subtab-1-subtle or #subtab-something-sub2, #subtab-sub, etc.

Another hacky selector that might work

Making the assumption that #subtab-?-sub? elements are always contained inside of #subtab-? elements and that #subtab-? elements can never contain another #subtab-? element, you could use the child combinator to target them: [id^="subtab-"] > [id^="subtab-"]

Relying on a class instead

A better solution would probably be to give all of the elements you are trying to target a common class, for instance <div class="subtab-sub">, then selecting them all would be as easy as .subtab-sub. Using a class would also yield much faster performance than using attribute selectors.

于 2013-05-02T06:55:27.067 回答
2

All the ids start with subtab so use 

div[id^='subtab']
于 2013-05-02T03:35:33.963 回答
0

我不确定您是否希望使用以这种方式构造的 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; }
于 2013-05-02T03:45:16.793 回答
-1

看看这个jQuery Selector
我认为它可以工作。

于 2013-05-02T03:46:53.257 回答