Html 从div溢出到屏幕全宽，背景色交替

我正在使用下面修改过的代码片段创建最大宽度布局，但我想使用伪选择器将

.flex parent:after{yellow}

更改为交替背景色，如我在下面的SASS中尝试所示

当伪选择器已将

background:yellow

作为目标时，是否可以执行此操作？是否可以在伪选择器中以伪选择器为目标，或者我正在进入兔子洞？我更喜欢保持事物的语义，而不是尝试添加额外的div

HTML

从

after伪元素与 选定的元素。它通常用于将化妆品内容添加到 元素，通过使用content CSS属性。此元素由 默认

由于它是一个虚拟子对象，您无法进一步选择，但允许组合选择器，因此您可以做的是

：n个类型（奇数）：：after

我创建了一个示例来说明我的意思，但您可以这样做：

  &:nth- {
    &of-type {
      &(odd)::after { background:orange; }
      &(even)::after { background:red; }
    }
    &child { // some other
      &(4)::after { background: pink; }
      &(5)::after { background: green; }
    }
  }

CSS:

---

此外，如果您想使其更具语义，请尝试以下操作：

  &:nth- {
    &of-type {
      &(odd)::after { background:orange; }
      &(even)::after { background:red; }
    }
    &child { // some other
      &(4)::after { background: pink; }
      &(5)::after { background: green; }
    }
  }

---

谢谢@thedefinitist！这是一些精简的代码：）因此，为了确认，您不会使用

来选择伪元素的直接子元素（如我如何编写它），而是使用

：

来组合它们？由您决定

我不知道您未来的计划是什么，如果你想指向direct childs，你可以使用它，但是如果你有很多其他的childs在2层或更深层次上，那么我根本不会使用它，我只会给他们一个类来创建一个指针，并且

：

只用于像这样的伪对象或

：：before

。我将此标记为正确答案，唯一的原因是它最容易阅读！有趣的发展：我需要在我自己的项目中将

z-index:1

添加到

.flex-parent

，才能真正看到文本。不知道为什么，但很容易解决！

.container{
    max-width:1000px;
    margin:0 auto;
}

.flex-parent{
    border:1px solid blue;
    position:relative;

  &:after {
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;
  }

  &:nth-of-type(odd)::after{
    background-color:orange ;
  }

  &:nth-of-type(even)::after{
    background-color:red;
  } 
}

  &:nth- {
    &of-type {
      &(odd)::after { background:orange; }
      &(even)::after { background:red; }
    }
    &child { // some other
      &(4)::after { background: pink; }
      &(5)::after { background: green; }
    }
  }