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

飞檐走壁的容MM
  • 417

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

难道是

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

clipboard.png


/**
  当右侧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的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。

回复
阅读 22.4k
3 个回答
✓ 已被采纳

你需要 first-of-type

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

(先吐槽下,论坛里现在不贴代码的势头是愈演愈烈啊……)


回到正题。试验了下,以下代码能跑通:
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;
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏