第 n 个子项转换为 IE 支持



我希望以下内容(每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>

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

不使用第

n 个子级的唯一方法是非常非常冗长(您必须分别针对每个第 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;
}

最新更新