2

我正在使用下面来自另一个线程的修改后的代码段来创建最大宽度布局，但我想.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;
        }
    }
}
4

2 回答 2

1

从文档

CSS ::after 伪元素匹配所选元素的虚拟最后一个子元素。它通常用于通过使用 content CSS 属性向元素添加装饰性内容。默认情况下，此元素是内联的。

由于它是一个虚拟孩子，你不能再选择任何东西，但允许组合选择器，所以你可以做的是:nth-of-type(odd)::after.

我创建了一个小提琴来说明我的意思，但你可以这样做：

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;
  } 
}
于 2016-10-20T19:50:07.003 回答
0

而且，如果你想让它更语义化，试试这样：

  &: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/

于 2016-10-20T20:13:09.510 回答