Question

我有一个包含主页和详细信息页面的ReactJS应用程序。

我使用:nth-child(an+b)在主页Feed中设置了列表样式。

.home-feed li :nth-child(5n+1) {
  background-color: #949CF6;
}

.home-feed li :nth-child(5n+2) {
  background-color: #F499A7;
}

.home-feed li :nth-child(5n+3) {
  background-color: #FFD89C;
}

.home-feed li :nth-child(5n+4) {
  background-color: #8FEADB;
}

.home-feed li :nth-child(5n+5) {
  background-color: #5485FD;
}

现在，主Feed中的每个li都有一个详细信息页面，我也希望为它设置相同的颜色。

实现这一目标的最佳途径是什么？

Answer 1

您可以使用nth-child()

＆＃13;

<style> 
.list>li:nth-child(5n+1) {
    background: red;
}
.list>li:nth-child(5n+2) {
    background: green;
}
.list>li:nth-child(5n+3) {
    background: blue;
}
.list>li:nth-child(5n+4) {
    background: gray;
}
.list>li:nth-child(5n+5) {
    background: yellow;
}
</style>

<ul class='list'>
<li>The first li.</li>
<li>The second li.</li>
<li>The third li.</li>
<li>The fourth li.</li>
<li>The fifth li.</li>
<li>The sixth li.</li>
<li>The seventh li.</li>
<li>The eight li.</li>
<li>The ninth li.</li>
<ul>

＆＃13;

注意：Internet Explorer 8及更早版本不支持：nth-child（）选择器

Answer 2

您也可以使用javascript来解决此问题。

var list = document.querySelector('ul');
var items = list.childNodes;
items = Array.prototype.filter.call(items, function(item) {
    if (item.nodeType == document.ELEMENT_NODE) return item;
});

for (var i = 0; i < items.length; i++) {
    if (i % 5 == 0) items[i].style.color = 'red';
    else if (i % 5 == 1) items[i].style.color = 'yellow';
    else if (i % 5 == 2) items[i].style.color = 'magenta';
    else if (i % 5 == 3) items[i].style.color = 'green';
    else if (i % 5 == 4) items[i].style.color = 'blue';
}

如何在无序列表中为5n + 1,5n + 2,5n + 3,5n + 4,5n + 5设置不同颜色的样式？

2 个答案: