css - 纯 CSS 中的第一类和最后一类选择器

Question

我只需要使用纯 CSS 在整个文档中选择第一个和最后一个类，
在我的例子中，结构如下:

<div class="Container">
    <div>
        <div class="Parent"></div>
        <pre>
            <span>
                <span class="myClass">YES</span>
                <span class="myClass">NO</span>
                <span class="myClass">NO</span>
            </span>
        </pre>
    </div>
    <div>
        <div class="Parent"></div>
        <pre>
            <span>
                <span class="myClass">NO</span>
                <span class="myClass">NO</span>
                <span class="myClass">YES</span>
            </span>
        </pre>
    </div>
</div>

DEMO HERE

注意:我正在尝试将其应用于真正的 codemirror 匹配标签，我不确定我发布的结构是否正确.. Here the real codemirror matchtags demo

Answer 1

看起来这就是你需要的:

.CodeMirror-code > div:first-child  .cm-tag:first-child {
    border: 1px solid red;
}
.CodeMirror-code > div:last-child .cm-tag:last-child {
    border: 1px solid blue;
}

UPDATED FIDDLE

注意:此解决方案依赖于所有跨度元素都包含一个公共(public)类 cm-tag 的假设 - 如 OP 的 fiddle 所示。