纯 CSS 中的第一个和最后一个类选择器答案

【问题标题】：first and last class selector in pure CSS纯 CSS 中的第一个和最后一个类选择器
【发布时间】：2014-09-26 01:01:59
【问题描述】：

我只需要使用纯 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

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

【问题讨论】：

CSS 不能像这样按类选择。
使用纯 CSS 是不可能的。我昨天在一个类似的项目（头等舱）上发布了answer，并且在该线程中链接的 BoltClock 发布了一个更大的答案。请检查他们是否有帮助。
CSS selector for first element with class 的可能副本
@Paulie_D：很难说问题是否相同，因为班级的第一个和最后一个孩子，以及整个文档中的第一个和最后一个孩子，不一定是同一件事。我刚刚在那边更新了我的答案以注意区别。

标签： css css-selectors

【解决方案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

注意：此解决方案依赖于假设所有 span 元素都包含一个公共类 cm-tag - 正如 OP 的小提琴所示。

【讨论】：

@danield 是的，但在实际页面中这似乎不起作用...please have a look
@Harry - 是的，我刚刚在回答中注意到了这一点。但从 OP 的代码来看，情况确实如此
@Danield：同意伙计。乍一看确实是这样。