如何使用Modernizr测试n-child？

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中支持任何浏览器的支持,但CSS :nth-child 支持在IE9,Chrome浏览器,Safari和Firefox