文章/答案/技术大牛

发布

社区首页 >问答首页 >css类名: not (: first - child )选择器不排除它的类名的第一个子

问css类名: not (: first - child )选择器不排除它的类名的第一个子
EN

Stack Overflow用户

提问于 2020-06-25 17:41:46

回答 2查看 1.9K关注 0票数 1

我需要使用:not(:first-child)从显示无规则中排除第一个子元素--参见下面的示例：

.child-div {
  background: green;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

.whatever {
  background: red;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

.child-div:not(:first-child) {
  display: none;
}

<div class="parent-div">
  <div class="whatever"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
  <div class="child-div"></div>
</div>

我原以为会有一个绿色广场，但事实并非如此。一切都是隐藏的。

从这里：css selector :first-child

，第一个孩子，适用于李。它应该选择在任何div下都是第一个孩子的lis。

从这里：CSS selector for first element with class

：一子伪类表示其父类的第一个子类.就这样。

child-div是那个家长家庭中唯一的孩子。

从这里：not:first-child selector

--如果您需要支持遗留浏览器，或者由于:not选择器的限制而受阻(它只接受一个简单的选择器作为参数)，那么可以使用另一种技术：

“简单选择器”的MDN定义：

简单选择器要么是类型选择器、通用选择器、属性选择器、类选择器、ID选择器，要么是伪类.

我用的是一门课：

<div class="child-div"></div>


.child-div:not(:first-child) {
  display: none;
}

为什么我不能选择所有的东西，除了我的例子中的第一个孩子？

我也试过：

not:first-child selector

first-of-type -但没有运气

html

css

回答 2

Stack Overflow用户

发布于 2020-06-25 17:51:39

您必须在父服务器上使用:not(:first-child)，因为您试图将目标对准孩子。没有孩子的“第一个孩子”，因为他们是孩子。我希望这是有意义的;)

.child-div {
  width: 100px;
  height: 30px;
  margin: 1rem;
}

.parent-div > :not(:first-child) {
  background: green;
}

<div class="parent-div">
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
  <div class="child-div">child-div</div>
</div>

票数 2

Stack Overflow用户

发布于 2020-06-25 17:53:46

您以错误的方式应用它，如果我做得对，您想要选择父div的第一个子类，所以您应该这样做：

编辑:我编辑了这篇文章，以匹配您的评论请求，它将选择父类的all子-div类，但第一个类除外。祝好运。

.child-div {
  background: green;
  width: 30px;
  height: 30px;
  margin: 1rem;
}

/*
.parent-div div:not(:first-child) {
  display: none;
}
*/

.parent-div > .child-div ~ .child-div {
    display: none;
}

<div class="parent-div">
  <div class="whatever">Test1</div>
  <div class="child-div">Test2</div>
  <div class="child-div">Test3</div>
  <div class="child-div">Test4</div>
  <div class="child-div">Test5</div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62581256

复制

相似问题

问css类名: not (: first - child )选择器不排除它的类名的第一个子
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css类名: not (: first - child )选择器不排除它的类名的第一个子EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css类名: not (: first - child )选择器不排除它的类名的第一个子
EN