獨立組件中的替代div樣式Angular2

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

添加類到組件容器像我下面做。並使用「第n個孩子」單雙

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

Answer 2

您需要將您的內容包裝在ID爲component1，component2等的div中。 和Class of component。 nth-child不工作的原因是因爲它在每個組件中尋找奇怪的「.style-this-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