CSS IE8 :nth-child 和 :before
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8492121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 :nth-child and :before
提问by smogg
Here is my CSS:
这是我的 CSS：
#nav-primary ul li:nth-child(1) a:after { }
Works everywhere now (used thison my website) except Internet Explorer 8...
工作，现在到处（用这个在我的网站），除了Internet Explorer 8中......
Is there possibly a way to use nth-child in IE8? This is the worst version of this browser... nothing works as it should and I can't find a way to fix it.
有没有办法在 IE8 中使用 nth-child？这是这个浏览器最糟糕的版本......没有任何效果，我找不到修复它的方法。
@edit: Simplified version of what I want to achieve: http://jsfiddle.net/LvvNL/. Its just a start. CSS will be more complicated so I need to be able to aim every one of this links. Hope adding classes to every link is not the only way
@edit：我想要实现的简化版本：http: //jsfiddle.net/LvvNL/。它只是一个开始。CSS 会更复杂，所以我需要能够瞄准这个链接中的每一个。希望为每个链接添加类不是唯一的方法
@edit2: I've just noticed that
@edit2：我刚刚注意到
#nav-primary ul li:nth-child(1) a {
border-top: 5px solid #144201;
}
IS actually working in IE8! But this:
实际上是在 IE8 中工作的！但是这个：
#nav-primary ul li:nth-child(1) a:after {
content: "Text";
display: block;
font-weight: normal;
padding-top: 5px;
font-size: 12px;
color: #666;
}
is NOT working. So what is going on?
不管用。那么发生了什么？
回答by thirtydot
You can (ab)use the adjacent sibling combinator (+)to achieve this with CSS that works in IE7/8.
您可以 (ab) 使用相邻的同级组合器 ( +)来通过适用于 IE7/8 的 CSS 实现这一点。
See:http://jsfiddle.net/thirtydot/LvvNL/64/
见：http : //jsfiddle.net/thirtydot/LvvNL/64/
/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
border-top: 5px solid green;
}?
You cannot emulate more complex variations of :nth-child()such as :nth-child(odd)or :nth-child(4n+3)with this method.
您无法模拟:nth-child()诸如此类:nth-child(odd)或:nth-child(4n+3)使用此方法的更复杂的变体。
回答by Niko
回答by JonMack
Try pairing Selectivizrwith NMWatcher. That's what I do on all my sites to get good pseudo selector support across all browsers. FWIW if you're using a lot of HTML5 elements then it might be worth using v 1.2.3 of NMWatcher rather than 1.2.4, I had a selectivizr issue with a site today which I couldn't seem to fix, then I moved to 1.2.3 and it worked fine.
尝试将Selectivizr与NMWatcher配对。这就是我在所有网站上所做的，以在所有浏览器中获得良好的伪选择器支持。FWIW 如果你使用了很多 HTML5 元素，那么使用 NMWatcher 的 v 1.2.3 而不是 1.2.4 可能是值得的，我今天有一个站点的 selectivizr 问题，我似乎无法修复，然后我移动了到 1.2.3 并且运行良好。
回答by Bojangles
IE8 (and below) doesn't support:nth-child(), but doessupport :after. However, because you're using :nth-child()before :afterin your selector, IE8 won't run it.
IE8（及以下）不支持:nth-child()，但不支持:after。但是，因为您在选择器中使用了:nth-child()before :after，IE8 不会运行它。
You could use a JavaScript solution by adding a class to that row, or a library that adds support for these selectors.
您可以通过向该行添加类或添加对这些选择器的支持的库来使用 JavaScript 解决方案。
回答by c4urself
You can use :first-child instead of :nth-child(1) this has better support in IE7+
您可以使用 :first-child 而不是 :nth-child(1) 这在 IE7+ 中有更好的支持
回答by omarjebari
ie9.js sounds like the best solution but you could also just add a class to the cells, eg
ie9.js 听起来是最好的解决方案，但您也可以只向单元格添加一个类，例如
<tr>
<td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
<td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
.first-cell {
font-weight: bold;
}
.second-cell {
font-weight: normal;
}
