css :nth-child() :after

Question

:nth-child()和after可以混用吗？

我有一个 <ol> 的项目，我想添加一些文本 :after。这很好用，但我希望在第 1、第 2 和第 3 项以及第 4、第 5 和第 6 项上使用不同的文本。

使用下面的代码，我最终会在每个 li 后面加上粉红色的“大”。

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

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> 

pretty.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 来做这件事，因为它只是一个“很高兴拥有”的功能。

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

Answer 1

你可以，但是你做错了..

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

您需要将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

:nth-child(an+b) 伪类表示法表示在文档树中具有 +b-1 个兄弟姐妹的元素，对于 n 的任何正整数或零值，并且具有父元素元素。

---

更新 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/ 上的演示

Answer 2

应该这样做：

#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;
}

JS Fiddle.

...<p> 始终是所示 HTML 结构中<li> 的第一个子级。

但请注意，第一个样式定义中的content: 'nom'; 规则已被覆盖（但存在“浮动”规则）：对于“:after”伪元素和其他伪元素，它的级联规则相同。 )

Answer 3

你可以像这样组合假...

#id li:nth-child(1)::before {
    border-left-color: red;
}
#id li:nth-child(2)::before {
    border-left-color: white;
}
#id li:nth-child(3)::before {
    border-left-color: blue;
}