：nth-child不在IE中工作
香港专业教育学院搜索我的具体问题，找不到它…我希望你们中的任何人都可以提供帮助。
我试图让nth-child在IE中工作 – 现在我已经读过你可以用Jquery做到这一点，我如何在这个实例中实现jquery？
我也使用这个Lib项目ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
它在Firefox中完美运行但不是IE – 请帮忙 – 谢谢
Header 1
View Image - Sub header 1
- Copy 1.
- Sub header 2
- Copy2
- Sub header 3
- Copy 3
- Sub header 4
- Copy 4
- Sub header 5
- Copy 5
- Sub header 6
- Copy 6
Javascript代码
$(function() { // Set up variables var $el, $parentWrap, $otherWrap, $allTitles = $("dt").css({ padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5 "cursor": "pointer" // make it seem clickable }), $allCells = $("dd").css({ position: "relative", top: -1, left: 0, display: "none" // info cells are just kicked off the page with CSS (for accessibility) }); // clicking image of inactive column just opens column, doesn't go to link $("#page-wrap").delegate("a.image","click", function(e) { if ( !$(this).parent().hasClass("curCol") ) { e.preventDefault(); $(this).next().find('dt:first').click(); } }); // clicking on titles does stuff $("#page-wrap").delegate("dt", "click", function() { // cache this, as always, is good form $el = $(this); // if this is already the active cell, don't do anything if (!$el.hasClass("current")) { $parentWrap = $el.parent().parent(); $otherWraps = $(".info-col").not($parentWrap); // remove current cell from selection of all cells $allTitles = $("dt").not(this); // close all info cells $allCells.slideUp(); // return all titles (except current one) to normal size $allTitles.animate({ fontSize: "14px", paddingTop: 5, paddingRight: 5, paddingBottom: 5, paddingLeft: 5 }); // animate current title to larger size $el.animate({ "font-size": "20px", paddingTop: 10, paddingRight: 5, paddingBottom: 0, paddingLeft: 10 }).next().slideDown(); // make the current column the large size $parentWrap.animate({ width: 320 }).addClass("curCol"); // make other columns the small size $otherWraps.animate({ width: 140 }).removeClass("curCol"); // make sure the correct column is current $allTitles.removeClass("current"); $el.addClass("current"); } }); $("#starter").trigger("click"); });
有多种方法可以使用jQuery :nth-child伪选择器：
$('dt:nth-child(odd)') // gets every odd-numbered dt $('dt:nth-child(even)') // gets every even-numbered dt $('dt:nth-child(3n)') // gets every third dt
编辑以回应@ Unihost的问题（在下面的评论中）：
如何创建和链接此jquery文件…就像任何普通的.js文件一样？
当然，唯一要记住的是你可能使用jQuery来应用css，所以我建议你用以下方式使用它：
$('dt:nth-child(odd)').addClass('oddDts'); $('dt:nth-child(even)').addClass('evenDts');
然后将以下内容（作为演示）添加到您的CSS中：
dt:nth-child(odd), /* for useful 'modern' broswers that understand */ dt.oddDts { /* referencing the class applied with IE-specific jQuery file */ background-color: #ffa; } dt:nth-child(even), /* for useful 'modern' broswers that understand */ dt.evenDts { /* referencing the class applied with IE-specific jQuery file */ background-color: #f00; }
我强烈建议不要尝试将所有相关的样式应用于jQuery，否则它会很快变得非常笨拙。 另外，这样，您可以在常规CSS中使用nth-child()伪选择器，并仅为IE包含jQuery：
顺便提一下，如果你想看看它是如何工作的，那就是一个JS Fiddle的意图演示 。
IE不支持:nth-child 。 将jQuery与常规CSS选择器一起使用，例如：
$('dl dt:nth-child(2n)') // gets every 2nd dt