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

Question

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."]

Answer 1

仅仅是因为当它不是 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>