IE8：nth-​​child和：before [英] IE8 :nth-child and :before

问题描述

这是我的CSS：

 ＃nav-primary ul li：nth-​​child 
  

现在可以在任何地方使用（使用这在我的网站上），除了Internet Explorer 8 ...

nth-child在IE8？
这是最糟糕的版本的浏览器...没有什么工作，因为它应该，我找不到一种方法来解决它。

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

@ edit2：
我刚刚注意到

 ＃nav-primary ul li：nth-​​child（1）a {
 border-top：5px solid＃144201; 
} 
  

IS实际上在IE8中工作！但是：

 ＃nav-primary ul li：nth-​​child（1）a：after {
 content： 文本; 
 display：block; 
 font-weight：normal; 
 padding-top：5px; 
 font-size：12px; 
 color：＃666; 
} 
  

无效。那么是怎么回事？

解决方案

你可以使用相邻兄弟组合器（ + ）。 p>

请参阅： http： //jsfiddle.net/thirtydot/LvvNL/64/

  / *等效to li：nth-​​child（1）* / 
＃nav-primary ul li：first-child a {
 border-top：5px solid red; 
} 
 / *相当于li：nth-​​child（2）* / 
＃nav-primary ul li：first-child + li a {
 border-top：5px固体蓝; 
} 
 / *相当于li：nth-​​child（3）* / 
＃nav-primary ul li：first-child + li + li a {
 border-top ：5px纯绿色; 
} 
  

您不能模仿：nth例如：nth-​​child（odd）或：nth-​​child（4n + 3）使用此方法。

Here is my CSS:

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

Works everywhere now (used this on my website) except 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.

@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: I've just noticed that

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

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?

解决方案

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

See: 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.

这篇关于IE8：nth-​​child和：before的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！