如何使最后一个链接没有：之后

Question

我有这个CSS

.pages a {
text-decoration: none;
color: #1e1e1e;
font-weight: bold;
display: inline;
padding-left: 8px;
}

.pages a:after {
content: "|";
padding-left: 8px;
}

我希望a:after中的内容在最后一个“a”后面有|。我该怎么办？我尝试使用:last-of-type，但它没有用。

目前看起来像这样

1 | 2 | 3 |

Answer 1

你可以试试这个

/*Other style goes here*/

.pages a:last-child:after {
    content: "";    
}

DEMO.

Answer 2

尝试使用此

.pages a:after {
  padding-left: 8px;
}
.pages a:not(:last-child):after {
  content: '|';
}

Fiddle

这会将填充添加到所有.pages a，并为|的最后一个孩子的a添加.pages

Answer 3

如果这样，last-of-type将起作用

.pages a:last-of-type:after{
    content: '';
}

Answer 4

这就是你想要的，我想：

http://jsfiddle.net/VVv7f/

.pages a {
    text-decoration: none;
    color: #1e1e1e;
    font-weight: bold;
    display: inline;
    padding-left: 8px;
}

.pages a:after {
    content: "|";
    padding-left: 8px;
}

.pages a:last-child:after {
    content: ""; /* this line overwrites your "|" with empty "" */
}