类的属性选择器以开头和结尾 [英] attribute selector for class starts with and ends with

问题描述

我一直在阅读属性选择器，例如〜^ |等等，但我不知道以下内容: 我如何使用以"abc"开头并以"xyz"结尾的类来定位元素. 我现在拥有的方式是:

div[class^="abc"][class$="xyz"]{}

但是如果我的元素看起来像这样，那就行不通了:

<div class="foo abcDExyz bar">

仅当abcDExyz是class属性中的唯一类时，它才有效.

基本上，我想定位一个以某事开头...以某事结尾的类.在这两者之间，任何事情都可以进行(例如在我的示例中为"DE") 我唯一的选择是使用*代替吗?

提前谢谢！

解决方案

只有在可以保证子字符串"abc"和"xyz"不会出现在该元素的class属性中的任何其他类名称中时，您才能执行此操作，并且它们将永远不会单独出现:

div[class*=" abc"][class*="xyz "]

即使当该类名称是class属性中的第一个，最后一个或仅一个时(即使您包括各自的^=和$=属性选择器，但它们仍然非常脆弱)，即使这种情况也很平淡./p>

否则，仅使用选择器甚至选择器列表将无法可靠地执行此操作.

如果本应表示为"abc"和"xyz"的是自己的类名，那么您会容易得多.

I have been reading up on attribute selectors, such as ~ ^ | etc, but I cant figure out the following: How do I target an element with a class starting with lets say "abc" and also ends with "xyz". The way I have it now is this:

div[class^="abc"][class$="xyz"]{}

But if my element looks like this, it wont work:

<div class="foo abcDExyz bar">

It only works if abcDExyz is the only class in the class attribute.

Basically, I want to target a class that starts with something... and ends with something. In between that, anything can go (such as 'DE' in my example) Is my only option to use * instead?

thanks in advance!

解决方案

You can only do this if you can guarantee that the substrings "abc" and "xyz" will never appear in any other class names within that element's class attribute, and they will never appear separately:

div[class*=" abc"][class*="xyz "]

And even this falls flat when that class name is the first, last, or only one in the class attribute (unless you include the respective ^= and $= attribute selectors, but it's all still very fragile).

Otherwise, you won't be able to do this reliably with just a selector, or even a list of selectors.

You'd have a much easier time if whatever "abc" and "xyz" are supposed to represent was its own class name, instead...

这篇关于类的属性选择器以开头和结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！