html - CSS 选择器向所有框添加一个 before 伪元素，但第一个和最后一个？

This question already has answers here:

How to select all children except first and last with CSS selectors

(5 个回答)

Select all except first and last td element in one selector

(3 个回答)

3年前关闭。

如何让 CSS 选择器将 before 伪元素添加到除第一个和最后一个之外的所有框？箱号是动态的。

.box:not(:first-of-type):before, .box:not(:last-of-type):before {
    ...
}

以上只是其中之一，但是当我将它们合二为一时，或者即使我将它们分开并复制 CSS，它也不起作用，即在所有元素之前添加。

.box-container {
width: 100%;
  display: flex;
  justify-content: space-around;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
}

.box:not(:first-of-type):before,
.box:not(:last-of-type):before {
  content: '';
  display: block;
  width: 2px;
  height: 100px;
  position: absolute;
  left: -20px;
  background-color: red;
}

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

我的第一个想法是只给他们所有的伪元素，但在第一个和最后一个类型的 before 上提供 display: none; 。

只是想知道这种选择器是否可以在 CSS 中使用像上面这样的一行

最佳答案

仅仅是因为当它不是 first-of-type 时，它可以是 last-of-type ，所以如果您不使用第一个规则选择它，您将使用第二个规则，反之亦然。您的两个规则组合仅相当于 .box::before
你可以试试这个，你将它们组合在一个选择器中，所以它不是 first-of-type 和不是 last-of-type :

.box-container {
width: 100%;
  display: flex;
  justify-content: space-around;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
  background-color: blue;
}

.box:not(:first-of-type):not(:last-of-type)::before {
  content: '';
  display: block;
  width: 2px;
  height: 100px;
  position: absolute;
  left: -20px;
  background-color: red;
}

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

关于html - CSS 选择器向所有框添加一个 before 伪元素，但第一个和最后一个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50476424/

上一篇：javascript - 如何使用 d3 扩展 select 标签中的选项数量？

下一篇：python - Django 错误信息 : ["' on' value must be either True or False."]

相关文章：

html - 在向下滚动时淡化 Bootstrap 导航栏，同时更改文本颜色

html - 表中的间距

jquery - 使用 .on 将事件应用于元素

css - 选择表单第一个表的所有列

html - chrome 中的奇怪样式

javascript - 根据其数据属性的值选择一个选项

html - Bootstrap 列居中

HTML 和 CSS flex 盒

java - 如何从 selenium java 中的 Web 元素中提取 XPATH 或 CSSPath

css - 我可以合并 :nth-child() or :nth-of-type() with an arbitrary selector?