试图瞄准前5个n个孩子，但失败了
试图瞄准前5个n个孩子，但失败了
提问于 2012-10-16 01:21:59
有了这个
a:nth-child(n)::before
{
content: "› ";
}
a:nth-child(n+1)::before
{
content: "›› ";
}
a:nth-child(n+2)::before
{
content: "››› ";
}
a:nth-child(n+3)::before
{
content: "›››› ";
}
a:nth-child(n+4)::before
{
content: "››››› ";
}我在试着得到
> a1
>> a2
>>> a3
>>>> a4
> a5
但它不起作用。需要帮助，我也尝试使用1,2,3,4,5而不是n+1，等等……但这也不起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-16 01:34:26
你已经在做的事情应该是有效的，即使这可能不是最好的方法。
这是一个edited version working
a {
display:block;
}
a:nth-child(1):before {
content: "› ";
}
a:nth-child(2):before {
content: "›› ";
}
a:nth-child(3):before {
content: "››› ";
}
a:nth-child(4):before {
content: "›››› ";
}
a:nth-child(5):before {
content: "››››› ";
}使用此HTML：
<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<a href="#">5</a>但不适用于以下内容：
<a href="#">1</a><a href="#">2</a>
<a href="#">3</a><a href="#">4</a>
<div>5</div>
<a href="#">6</a>因此，除非您的布局正好是第一个布局，否则您可能希望使用nth-of-type。
您也可以使用a single colon :before
Stack Overflow用户
发布于 2012-10-16 01:26:13
我想我还没有太多地使用这个特性，但似乎你必须指定n+1作为你的第一个特性，并从那里开始：
a:nth-child(n+1)::before
{
content: "› ";
}
a:nth-child(n+2)::before
{
content: "›› ";
}
a:nth-child(n+3)::before
{
content: "››› ";
}
a:nth-child(n+4)::before
{
content: "›››› ";
}
a:nth-child(n+5)::before
{
content: "››››› ";
}演示：http://jsbin.com/aboxop/1
来源：http://jsbin.com/aboxop/1/edit
编辑:此外，正如@GionaF在他的评论中所说的那样，这将只在一些浏览器中支持。(支持CSS选择器级别3的那些)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12900793
复制相关文章
相似问题
腾讯云开发者
