类的属性选择器以

Question

我一直在阅读属性选择器，例如 ~ ^ | 等等，但我无法弄清楚以下内容：我如何定位一个以“abc”开头并以“xyz”结尾的类的元素。我现在的方式是这样的：

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

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

<div class="foo abcDExyz bar">

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

基本上，我想定位一个以某事开始......并以某事结束的班级。在这两者之间，任何事情都可以进行（例如我的示例中的“DE”）是我使用 * 的唯一选择吗？

提前致谢！

Answer 1

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

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

即使当该类名是类属性中的第一个、最后一个或唯一一个时，这也会失败（除非您包含相应的^=和$=属性选择器，但它仍然非常脆弱）。

否则，您将无法仅使用一个选择器甚至一个选择器列表来可靠地完成此操作。

如果“abc”和“xyz”应该代表它自己的类名，那么你会更容易，而不是......