html - CSS :nth-child() :after

Question

是否可以混合:nth-child()和 after ？

我有一个 <ol>元素，我想添加一些文本 :after .这工作正常，但我想在第 1、第 2 和第 3 个元素以及第 4、第 5 和第 6 个元素上有不同的文本。

使用下面的代码，我最终得到每个 li后面有粉红色的“大”。

这对我来说没有意义，但我是这个 nth-child 的新手可恶。

data.html

<ol id="id" class="ui-sortable">
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol> 

漂亮的.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

我真的不想用 js 来做这件事，因为它只是一个“不错”的功能。

我只担心新浏览器，所以不需要针对旧 IE 等的解决方法。

Answer 1

可以，但是你做错了..

所有 p 元素都在 li 中的问题。所以他们都是他们的 li 容器的第一个 child 。

您需要将 nth-child 放在 li 元素上。

#id li:nth-child(1) p:after,
#id li:nth-child(2) p:after,
#id li:nth-child(3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-child(4) p:after,
#id li:nth-child(5) p:after,
#id li:nth-child(6) p:after {
    content: 'Nom';
    color: blue;
}

---

引用 the W3C documentation

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n, and has a parent element.

---

更新 1

您也可以使用

来简化它

#id li:nth-child(-n+3) p:after {
    content: 'OM';
    color: pink;
}

#id li:nth-last-child(-n+3) p:after { /*this means last 3*/
    content: 'Nom';
    color: blue;
}

演示在 http://jsfiddle.net/gaby/4H4AS/2/

---

更新 2

如果您只希望前六个不同(而不是前 3 个和后 3 个)，您可以

#id li:nth-child(-n+6) p:after { /*this means first 6*/
    content: 'Nom';
    color: blue;
}

#id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/
    content: 'OM';
    color: pink;
}

演示在 http://jsfiddle.net/gaby/4H4AS/3/