Question

通常，我使用Modernizr进行常规特征检测，但它无法检测浏览器选择器支持（即：nth-of-type（）选择器）。

有没有办法用jQuery检测浏览器的选择器支持？

Answer 1

即使在CSS中不支持该选择器的浏览器中，选择带有jQuery选择器的元素也是正确的。

但是，您可以使用CSS3选择器应用样式，然后使用jQuery选择一个元素以确定是否已应用该样式。

例如在CSS中：

#myid > p {
  display: none;
}

然后在jQuery中：

if ( $( '#myid > p' ).css('display') != 'none' ) {
 // blah
}

但要小心，因为.css()可能无法返回您的期望。例如，如果您应用“红色”之类的颜色，它将返回rgb(255, 0, 0)。

抱歉，我知道这不像Modernizr那样完美，但我希望它可以帮助您处理。

Answer 2

您可以尝试选择具有该选择器的内容，如果它返回'NULL'，浏览器不支持它，或者没有该类型的元素

我的建议是在你知道存在的东西上使用选择器。

Answer 3

您无需为此使用jQuery-常规JavaScript可以满足您的要求：

function supportsSelector(selector){
  if(selector.indexOf(":") !== 0) {
    selector = ':'+selector;
  }
  try {
    var queryString = "body" + selector + ",body:not(" + selector + ")";
    return !!document.querySelector("body" + selector + ",body:not(" + selector + ")");
  } catch (e) {
    return false;
  }
}

console.log(supportsSelector("hover"));
console.log(supportsSelector(":hover"));
console.log(supportsSelector(":focus-within"));
console.log(supportsSelector("I made this up"));
console.log(supportsSelector(":not(.a, .b)"));

这应该在IE9及更高版本中有效（需要querySelector和：不支持）。

使用jQuery检测浏览器的CSS选择器支持

3 个答案: