通过伪类选择器 not(:first-child) 过滤后为何第一个子元素还是会生效

Question

理想效果是
除了第一行分隔栏外其余都应用如下样式
但现在的效果是
所有的分隔栏都被应用了如下的样式

难道是

• :not(:first-child) 不支持这种写法? 但是如果不支持为什么样式生效了

/**
  当右侧card-widget
  内含有多个分隔栏时
  除第一个外 均淡化其边框颜色
 */
.card-widget > .ui.divider:not(.vertical):not(.horizontal):not(:first-child) {
    border-top: 1px solid rgba(34, 36, 38, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

<div class="ui segment card-widget">
                    <h5>父话题</h5>
                    <div class="ui divider"></div>
                    <div class="ui labels">
                        <a class="ui  label  basic">开发语言</a>
                    </div>
                    <h5>子话题</h5>
                    <div class="ui divider"></div>
                    <div class="ui labels">
                        <a class="ui  label  basic">Java</a>
                        <a class="ui  label  basic">Ruby</a>
                        <a class="ui  label  basic">Switch3</a>
                        <a class="ui  label  basic">CSS3</a>
                        <a class="ui  label  basic">Python</a>
                        <a class="ui  label  basic">Ruby</a>
                    </div>
</div>

这里是一个简单的demo
https://jsfiddle.net/5jud07ey/

解决了

将

:not(:first-child)

替换成

:not(:first-of-type)

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

Answer 1

你需要 first-of-type

Answer 2

（先吐槽下，论坛里现在不贴代码的势头是愈演愈烈啊……）

---

回到正题。试验了下，以下代码能跑通：
HTML:

<ul class="card">
    <li class='uri a'>1</li>
    <li class='uri a'>2</li>
    <li class='uri a vert'>3</li>
    <li class='uri a'>4</li>
    <li class='uri a'>5</li>
    <li class='uri a vert'>6</li>
    <li class='uri a hori'>7</li>
    <li class='uri a hori'>8</li>
    <li class='uri a'>9</li>
</ul>

CSS:

.card > .uri.a:not(.vert):not(.hori):not(:first-child) {
    color: red;
}

所以怀疑问题不在目前给到的代码里。

Answer 3

首先看到那么那么那么。。。长的样式选择器,就没有再往下看的欲望