CSS通配符用于复杂ID

本文介绍了CSS通配符用于复杂ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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