从 div 溢出到具有交替背景色的屏幕全宽

Question

我正在使用下面的修改代码段来创建最大宽度布局，但我想使用伪选择器将 .flex-parent:after {yellow} 更改为交替背景色，如我的尝试所示在下面 SASS 中。

当 background:yellow 已经成为伪选择器的目标时，我可以这样做吗？是否可以在一个伪选择器中定位一个伪选择器，或者我是在掉进兔子洞吗？我宁愿保持语义而不是尝试添加额外的 div。

HTML

<section class="container">
    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (even)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>
</section>

SASS

.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){
        background-color:orange ;
        }

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

Answer 1

来自the docs

The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

因为它是一个虚拟的 child 你不能再 select 了，但是允许组合 select 或者，所以你可以做的是 :nth-of-type(odd)::after。

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

CSS:

.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;
  } 
}

Answer 2

另外，如果你想让它更语义化，试试这样：

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

https://jsfiddle.net/Dezain/1oy01zt7/2/

从 div 溢出到具有交替背景色的屏幕全宽

Overflow from div to full width of screen with alternating background color

html

css

css-selectors

alternating

pseudo-element