Question

如何选择容器中第一个 div 之后和最后一个 div 之前的 div 元素，以便选择介于两者之间的所有内容

我的css中有这个

&--marker {
        background: green;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        &:first-child {
            left: calc((100% / var(--index)));
        }

        // selector below doesn't work
        &:nth-of-type():not(:first-of-type):not(:last-of-type) {                
            left: calc((100% / (var(--index) + 1)) - (var(--width)/2));
        }

        &:last-child {
            left: calc((100%  - var(--width));

        }
    }

Answer 1

你可以试试这个：

.container div:not(:first-child):not(:last-child) {
       /* css here */
}

Answer 2

由于您的问题没有任何 HTML 结构，所以我创建了一个测试并将颜色应用于所有内部，然后更新第一个和最后一个孩子，您是否正在寻找相同的内容？

div.container *{ 
  color: red;
}
div.container div:first-child,
div.container div:last-child{ 
  color: green;
}

<div class="container">
  <div class="first">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div class="last">6</div>
</div>

Answer 3

简单

.someParentClass div:not(:first-child):not(:last-child) {
 //your css
}

css 选择器 - 选择第一个和最后一个之间的每个 div

3 个答案:

你可以试试这个：