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

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: "";    
}

演示。

Answer 2

尝试使用这个

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

小提琴

这会将填充添加.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 "" */
}