Html css :nth-child() :after
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13957498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css :nth-child() :after
提问by rockingskier
Is it possible to mix :nth-child()and after?
是否可以混合:nth-child()和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.
我有一个<ol>项目，我想添加一些文本:after。这工作正常，但我希望在第 1、2 和 3 项以及第 4、第 5 和第 6 项上有不同的文本。
With the below code I end up with every lihaving 'large' in pink after it.
使用下面的代码，我最终得到的都是li粉红色的“大”。
This doesn't make sense to me however I am new to this nth-childmalarky.
这对我来说没有意义，但是我对这个nth-child问题很陌生。
data.html
数据.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
漂亮的.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.
我真的不想用 js 来做这件事，因为它只是一个“很高兴”的功能。
I'm only worried about new browsers so no need for workarounds for oldIE etc.
我只担心新浏览器，所以不需要旧 IE 等的解决方法。
回答by Gabriele Petrioli
You can, but you are doing it wrong..
你可以，但你做错了..
The issue that that all your pelements are inside li. So all of them are the first child of their licontainer.
你所有的p元素都在里面的问题li。所以他们都是他们li容器的第一个孩子。
You will need to put the nth-childon the lielements.
你需要把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;
}
Quoting the W3C documentation
引用W3C 文档
The
:nth-child(an+b)pseudo-class notation represents an element that has an+b-1 siblings before itin the document tree, for any positive integer or zero value of n, and has a parent element.
的
:nth-child(an+b)伪级符号代表具有一个+ B-1的元素的兄弟姐妹之前它在文档树中，对于任意的正整数或正的零值，并具有父元素。
Update 1
更新 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/
演示在http://jsfiddle.net/gaby/4H4AS/2/
Update 2
更新 2
If you want the first six only to be different (and not first 3 and last 3) you could
如果您只希望前六个不同（而不是前 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;
}
回答by raina77ow
Should be done like this:
应该这样做：
#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;
}
... as <p>is always the first child of <li>in the shown HTML structure.
...<p>始终<li>是显示的 HTML 结构中的第一个子元素。
Take note, though, that content: 'nom';rule in the very first style definition was overwritten (but 'float' rule stood): it's the same cascading ruling for the ':after' pseudo-element as for the others. )
但是请注意，content: 'nom';第一个样式定义中的规则已被覆盖（但 'float' 规则仍然有效）：它与 ':after' 伪元素的级联规则相同。)
回答by Gerd
You can combine the psudeos like so...
你可以像这样组合伪...
#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;
}
