IE8 :nth-child 和 :before

IE8 :nth-child and :before(IE8 :nth-child 和 :before)

问题描述

这是我的 CSS:

#nav-primary ul li:nth-child(1) a:after { }

现在可以在任何地方使用(在我的网站上使用 this)，除了 Internet Explorer 8...

Works everywhere now (used this on my website) except Internet Explorer 8...

有没有办法在 IE8 中使用 nth-child?这是这个浏览器的最差版本...没有任何效果，我找不到修复它的方法.

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.

@我想要实现的简化版本:http://jsfiddle.net/LvvNL/.它只是一个开始.CSS 会更复杂，所以我需要能够瞄准每个链接.希望为每个链接添加类不是唯一的方法

@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

@edit2:我刚刚注意到了

@edit2: I've just noticed that

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

实际上在 IE8 中工作！但是这个:

IS actually working in IE8! But this:

#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?

推荐答案

你可以(ab)使用 adjacent兄弟组合器 (+) 使用适用于 IE7/8 的 CSS 实现此目的.

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

参见: 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;
}​

您无法模拟 :nth-child() 的更复杂变体，例如 :nth-child(odd) 或 :nth-child(4n+3) 用这个方法.

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

这篇关于IE8 :nth-child 和 :before的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！