html – 类的属性选择器以及以…结尾

我一直在阅读属性选择器,例如〜^ |等,但我无法弄清楚以下内容：
如何使用以“abc”开头的类来定位元素,并以“xyz”结尾.
我现在的方式是：

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

但如果我的元素看起来像这样,它就不会工作：

<div class="foo abcDExyz bar">

它只适用于abcDExyz是class属性中唯一的类.

基本上,我想要定位一个以某些东西开头的类……并以某些东西结束.在这之间,任何东西都可以去(例如我的例子中的’DE’)
我唯一的选择是使用*代替吗？

提前致谢！

解决方法

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

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

当类名是class属性中的第一个,最后一个或唯一一个时,即使这样也是平的(除非你包括各自的^ =和$=属性选择器,但它们仍然非常脆弱).

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

如果“abc”和“xyz”应该表示的是它自己的类名,那么你会有一个更容易的时间,而不是……