nth-child 转换为 IE 支持答案

【问题标题】：nth-child conversion to IE supportnth-child 转换为 IE 支持
【发布时间】：2013-10-08 16:16:06
【问题描述】：

我希望以下（每 5 个带有“.span-tag”类的元素）与 IE 7/8 兼容

.taggar .row-fluid .span-tag:nth-child(5n),
    margin-left: 0;
}

我尝试了以下方法，但它不起作用，所以可能我做错了：

.taggar .row-fluid .span-tag:first-child + .span-tag .span-tag .span-tag .span-tag {
    margin-left: 0;
}

html：

<div class="action-container container taggar">
    <div class="row-fluid">
        <div class="span3 span-tag">
            <a href="#"><div class="tag label btn-tag tags"><span>foo1</span></div><span class="votes">x 61</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo2</span></div><span class="votes">x 52</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo3</span></div><span class="votes">x 387</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo4</span></div><span class="votes">x 343</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo5</span></div><span class="votes">x 434</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo6</span></div><span class="votes">x 4</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo7</span></div><span class="votes">x 134</span></a>
        </div>
        <div class="span3 span-tag">
            <a href=""><div class="tag label btn-tag tags"><span>foo8</span></div><span class="votes">x 32</span></a>
        </div>      
    </div>
</div>

【问题讨论】：

我认为不使用 nth-child 就无法做到这一点

标签： css internet-explorer cross-browser css-selectors

【解决方案1】：

不使用 nth-child 的唯一方法是非常非常冗长（您必须分别针对每个第 5n 个案例）-

如果您知道 span-tag 类数量的上限——那么这种方式可能是可行的，否则——你就不走运了。：

.span-tag:first-child + .span-tag + .span-tag + .span-tag + .span-tag { /* 5 times */
    margin-left: 0;
}

.span-tag:first-child + .span-tag + ... + .span-tag { /* 10 times */
    margin-left: 0;
}

.span-tag:first-child + .span-tag + ... + .span-tag { /* 15 times */
    margin-left: 0;
}

等

【讨论】：

【解决方案2】：

我不确定您的问题，但您可以使用 a link - selectivizr 是一个 JavaScript 实用程序，它在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器

【讨论】：