html - CSS :first and :last-of-sequence pseudo-selectors like?

Question

我需要通过 CSS 按顺序选择一些节点。基本上类似于 .button:first-of-sequence。目前它不存在，所以我正在寻找替代方法。看这个案例:

<div class="paginator-widget">
    <div class="page">First</div>
    <div class="page">Previous</div>
    <div class="separator"></div>
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <div class="page">4</div>
    <div class="separator"></div>
    <div class="page">Next</div>
    <div class="page">Last</div>
</div>

这是一个分页器，我需要设置每组 .page 的样式，将 first-of-sequence 左边框圆化，middle-sequence code>(默认)没有边框，last-of-sequence 右边框是圆形的(注意 .separator 会打断序列)。像这样的东西:

.page { background-color: black; color: white; }
.page:first-of-sequence { border-radius: 5px 0 0 5px; }
.page:last-of-sequence { border-radius: 0 5px 5px 0; }

是否可以使用纯 CSS，或者我需要指定一个新类来匹配这个特定元素？ ( like this example )

Answer 1

不存在这样的东西，但您可以使用包含元素来获得相同的结果。

HTML:

<div class="paginator-widget">
    <section>
        <div class="page">First</div>
        <div class="page">Previous</div>
    </section>
    <section>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
        <div class="page">4</div>
    </section>
    <section>
        <div class="page">Next</div>
        <div class="page">Last</div>
    </section>
</div>

CSS:

.page { background-color: black; color: white; }
section div:first-child { border-radius: 5px 0 0 5px; }
section div:last-child { border-radius: 0 5px 5px 0; }

jsFiddle Link