0

これとともに

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

しかし、それは機能しません...これについて助けが必要です.n + 1の代わりに1,2,3,4,5を使用してみました...しかし、それも機能しません.

4

2 に答える 2

2

最善の方法でなくても、すでに行っていることはうまくいくはずです。

これが編集されたバージョンの作業です：

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を使用する必要があります。

単一のコロンを使用することもできます:before

于 2012-10-15T17:34:26.380 に答える
1

私はまだその機能をあまり使用していないと思いますが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 をサポートするもの)

于 2012-10-15T17:26:13.433 に答える