CSS通配符用于复杂ID [英] CSS wild card for complex ID's
问题描述
如果我有一个css选择器,例如#subab-1,#subab-2 etc
If I had a css selector such as #subtab-1, #subtab-2 etc
可以使通配符选择器像这样 div [id ^ ='subtab - ']
I could make the wildcard selector as suchdiv[id^='subtab-']
但我不知道如何为选择器创建一个通配符,例如
But I cannot figure out how to make a wild card for selectors such as
#subtab-1-sub1, #subtab-1-sub2, `#subtab-1-sub2, #subtab-2-sub1, #subtab2-sub2, #subtab2-sub-3
etc ...如何制作像div [id ^ ='subtab- tab - '](* =通配符)
etc... how can you make something like div[id^='subtab-tab-'] (*=wildcard)
推荐答案
如果我正确地理解你的问题,你试图选择所有元素的id以 subtab -
,随后是 -sub
,后跟另一个数字。它也听起来像你想要这个选择器不匹配#subab-1
,只有后缀像#subtab-1-sub1
。
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
.
这不能用CSS。 CSS不提供将允许使用通配符的选择器。
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.
[id ^ =subtab - ] [id * = - sub]
将匹配以 subtab -
还在id中包含 -sub
。这可能会工作,但可能会导致对#subab-1-subtle
或#subtab-something-sub2
,#subab-sub
等。
[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.
假设 #subtab - ? - sub?
元素总是包含在 #subtab - ?
元素,
#subtab - ?
元素不能包含另一个 #subtab - ?
元素可以使用子组合器定位它们: [id ^ = subtab-]> [id ^ =subtab - ]
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-"]
更好的解决方案可能会提供您尝试定位的所有元素类,例如< div class =subtab-sub>
,那么选择它们将会像 .subtab-sub
。使用类的速度比使用属性选择器的速度快得多。
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.
这篇关于CSS通配符用于复杂ID的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!