Question

我正在尝试将条纹外观应用于几个div。我的结构如下。每个组件都是一个在ngFor循环中呈现的新实例，如下所示：

<div *ngFor="let data of dataSet>
  <component1 [data]="data"></component1>
</div>

呈现HTML

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1>
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

以下是我的尝试：

CSS

  div[class^="style-this-div"]:nth-of-type(odd) {background-color: #efeeee;}
  div[class^="style-this-div"]:nth-of-type(even) {background-color: #efeeee;}

  .style-this-div:nth-child(odd) {background-color: #efeeee;}
  .style-this-div:nth-child(even) {background-color: #efeeee;}

当我使用奇数选择器时，灰色背景颜色将应用于所有这些颜色。我试图让他们换色。我能做什么？谢谢！

Answer 1

您需要将内容包装在ID为component1，component2等的div中... 和组件类。第n个孩子没有工作的原因是因为它正在寻找奇怪的＆＃34; .style-this-div＆＃34;在每个组件中，而不是在文档中。这样我们就可以定位它的第一个组件类，并将div设置为内部样式。

如果您无法更改结构，只需将.component类添加到您的顶级元素中，下面的css仍应有效。

如果您有疑问，请告诉我。

HTML

<div id="component1" class="component">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</div>

<div id="component2" class="component">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</div>

CSS

  .component:nth-child(odd) .style-this-div {background-color: #efeeee;}
  .component:nth-child(even) .style-this-div {background-color: #fff;}

Codepen Here

Answer 2

像我在下面所做的那样将一个类添加到组件容器中。并使用“nth-child”奇数和偶数

.component1:nth-child(odd)  .style-this-div{
  background: red;
}
.component1:nth-child(even) .style-this-div{
  background: yellow;
}

<component1 class="component1">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1 class="component1">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
</component1>

<component1 class="component1">
  <div>
    <div class="style-this-div">
      some content
    </div>
  </div>
  </component1>

在单独的组件Angular2中的备用div样式

2 个答案: