所有以前缀开头的元素的CSS选择器

Question

我有几种聚合物元素。

<ps-el-one/>
<ps-el-two/>
<ps-el-three/>
<ps-el-four/>

我希望能够使用CSS选择器或javaScript查询以“ ps-”开头的所有元素。

我提出了以下解决方案，但我想知道是否还有更有效的方法？

var allElementsOnPage = document.querySelectorAll('*');
var res = [];
for (var index in allElementsOnPage) {
  var el = allElementsOnPage[index];
  if (el && el.tagName && el.tagName.substr(0, 3) == 'PS-') {
    res.push(el);
  }
}

这种解决方案似乎效率很低。

Answer 1

我不知道有任何元素选择器，但可以使用 CSS3 属性和类子字符串匹配选择器（IE7+ 支持）：

[class^="tocolor-"], [attr*=" tocolor-"] {
    color:red 
}

不确定这是否是您想要的，但可能为您提供另一种实现相同目标的方法。