类的属性选择器以及以...结尾

时间:2016-09-27 10:34:48

标签: html css css-selectors

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

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

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

<div class="foo abcDExyz bar">

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

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

提前感谢!

1 个答案:

答案 0 :(得分:3)

如果你能保证子串&#34; abc&#34;你只能这样做。和&#34; xyz&#34;将永远不会出现在该元素的类属性中的任何其他类名中,并且它们永远不会单独出现:

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

如果该类名是class属性中的第一个,最后一个或唯一一个(除非您包含相应的^=$=属性选择器,否则即使这样也会失败,但它&#39;一切都还很脆弱。)

否则,您只能通过选择器甚至选择器列表无法可靠地完成此操作。

如果有的话,你会有更轻松的时间。#34; abc&#34;和&#34; xyz&#34;应该代表它自己的类名,而不是......