css：nth-child（）：之后 [英] css :nth-child() :after
问题描述
是否可以在之后混合：nth-child（）和？
我有一个< ol> 项目，我想在 C>。这工作正常，但我希望在第一，第二和第三项以及第四，第五和第六项上有不同的文本。
使用下面的代码I最后每一个 li 后面有粉红色的'large'。
这对我没有意义但是我对这个 nth-child malarky不熟悉。
data.html
< ol id =idclass =ui-sortable>
< li>
< p>培根< / p>
< / li>
< li>
< p>培根< / p>
< / li>
< li>
< p>培根< / p>
< / li>
<！..重复 - >
< li>
< p>培根< / p>
< / li>
< / ol>
pretty.css
#id li p：在{
float：right;
内容：'nom';
}
#id li p：nth-child（1）：after，
#id li p：nth-child（2）：after，
＃ id li p：nth-child（3）：在{
content：'OM';
颜色：粉红色;
}
#id li p：nth-child（4）：after，
#id li p：nth-child（5）：after，
＃ id li p：nth-child（6）：after {
content：'Nom';
颜色：蓝色;
}
我真的不想这样做，因为它只是一个'很高兴有'功能。
我只是担心新的浏览器，所以不需要oldIE等的解决方法。
你可以，但你做错了。
所有 p 元素在 li 中。所以他们都是他们的 li 容器的第一个孩子。
您需要将<$ c
#id li：nth-child（1）p：after，
#id li：nth-child（2）p：after，
#id li：nth-child（3 ）p：在{
content：'OM';
颜色：粉红色;
}
#id li：nth-child（4）p：after，
#id li：nth-child（5）p：after，
＃ id li：第n个孩子（6）p：在{
内容之后：'Nom';
颜色：蓝色;
引用 W3C文档
：nth-child（an + b）伪类表示法表示在其之前具有+ b-1 同胞的元素 in文档树，对于任何正整数或为零的值，并且具有父元素。
更新1
您也可以通过使用
#id li：nth-child（-n + 3）p：在{
内容之后：'OM';
颜色：粉红色;
}
#id li：nth-last-child（-n + 3）p：在{/ *之后表示最后3 * /
内容：'Nom';
颜色：蓝色;
}
演示http://jsfiddle.net/gaby/4H4AS/2/
更新2
如果您希望前六个不同（而不是前3个和后3个 ）你可以
#id li：nth-child（-n + 6）p：after {/ * this means first 6 * /
内容：'Nom';
颜色：蓝色;
$ b $ #id li：nth-child（-n + 3）p：在{/ *之后，这意味着前3个，因为它第二个它优先于普通的前一个元素* /
内容：'OM';
颜色：粉红色;
}
演示http://jsfiddle.net/gaby/4H4AS/3/
Is it possible to mix :nth-child() and after?
I have an <ol> of items and I want to add some text :after. This works fine but I'd then like to have different text on 1st, 2nd and 3rd items and then 4th, 5th and 6th as well.
With the below code I end up with every li having 'large' in pink after it.
This doesn't make sense to me however I am new to this nth-child malarky.
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;
}
I'd really like not to do this with js as it just a 'nice to have' feature.
I'm only worried about new browsers so no need for workarounds for oldIE etc.
You can, but you are doing it wrong..
The issue that that all your p elements are inside li. So all of them are the first child of their li container.
You will need to put the nth-child on the li elements.
#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;
}
Quoting 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.
Update 1
You could also simplify this by using
#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;
}
Demo at http://jsfiddle.net/gaby/4H4AS/2/
Update 2
If you want the first six only to be different (and not first 3 and last 3) you could
#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;
}
Demo at http://jsfiddle.net/gaby/4H4AS/3/
这篇关于css：nth-child（）：之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
