Question

我正在尝试使用modernizr来测试:nth-child浏览器支持，但我不知道该怎么做，我发现这个http://jsfiddle.net/laustdeleuran/3rEVe/测试:last-child但是我不知道如何更改它以检测:nth-child（我也在考虑使用它，因为我认为不支持:last-child的浏览器不支持:nth-child但我不确定）

你能帮助我吗？提前谢谢！

Answer 1

我刚写了一个函数来检测：nth-child支持你

function isNthChildSupported(){
var result = false,
    test =  document.createElement('ul'),
    style = document.createElement('style');
test.setAttribute('id', 'nth-child-test');
style.setAttribute('type', 'text/css');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('id', 'nth-child-test-style');
style.innerHTML = "#nth-child-test li:nth-child(even){height:10px;}";
for(var i=0; i<3; i++){
    test.appendChild(document.createElement('li'));   
}
document.body.appendChild(test);
document.head.appendChild(style);
  if(document.getElementById('nth-child-test').getElementsByTagName('li')[1].offsetHeight == 10) {result = true;}
document.body.removeChild(document.getElementById('nth-child-test'));
document.head.removeChild(document.getElementById('nth-child-test-style'));
  return result;
}

用法：

isNthChildSupported() ? console.log('yes nth child is supported') : console.log('no nth child is NOT supported');

您可以在此处看到此功能 http://jsbin.com/epuxus/15

此外，jQuery :nth-child和CSS :nth-child之间存在差异。

jQuery :nth-child 支持jQuery支持的任何浏览器，但IE9，Chrome，Safari和Firefox中的CSS :nth-child is supported

Answer 2

我记得有一个Modernizr选择器插件测试了选择器支持，但我现在找不到它。您可以看一下：http://javascript.nwbox.com/CSSSupport/，它类似。

Answer 3

您还可以使用Selectivizr向不受支持的浏览器添加CSS3选择器支持

Answer 4

莫赫森，谢谢你的决定。如果有人需要jQuery：

function test(){

  var result = false,
      test =  $('<ul id="nth-child-test"><li/><li/><li/></ul>').appendTo($('body')),
      style = $('<style type="text/css">#nth-child-test li:nth-child(even){height:10px;}</style>').appendTo($('head'));

  if(test.children('li').eq(1).height() == 10)
    result = true;

  test.remove();
  style.remove();

  return result;

};

如何使用Modernizr测试n-child？

4 个答案: