html - 如何使用:last-child + :after together?

Question

我不确定为什么这不起作用。我正在尝试更改 :last-child 元素的 :after 规则，但它忽略了 :last-child:after。

HTML:

<section id="timeline">
    <article></article>
    <article></article>
    <article></article>
</section>

CSS:

#timeline article:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 1px;
    background: #222;
    z-index:1;
}

#timeline article:last-child:after {background:none!important}

演示:https://jsfiddle.net/cd8g2hs0/4/

我发现了有关此问题的其他问题，看来我做对了。但显然我不是!

Answer 1

我认为您的代码正在运行 - 它只是没有产生您期望的结果。

尝试将 fiddle 中 CSS 的第一行更改为以下内容:

#timeline article {padding:0;position:relative}

这是否得到了您想要的结果？