css 我想有一个不同的颜色为奇数和偶数列表,我不明白为什么我的代码不工作

w41d8nur 于 2023-03-09 发布在其他

关注(0)|答案(2)|浏览(99)

我需要帮助。我有几个项目列表中，并希望奇数和偶数有不同的颜色。我不想要JQuery/Javascript。我只想要CSS。
这是我的代码。

<style>
a { text-decoration:none; }
.test ul { list-style-type: none;  }
.test li { display: inline-block; font-size:18px; color:#999; }
.test li a:nth-child(odd) { color:blue; }
.test li a:nth-child(even) { color:green; }

</style>

<ul class="test">
<li><a href="">Store 1</a></li>
<li>|</li>
<li><a href="">Store 2</a></li>
<li>|</li>
<li><a href="">Store 3</a></li>
<li>|</li>
<li><a href="">Store 4</a></li>
<li>|</li>
<li><a href="">Store 5</a></li>
</ul>

<ul class="test">
<li><a href="">Store 6</a></li>
<li>|</li>
<li><a href="">Store 7</a></li>
<li>|</li>
<li><a href="">Store 8</a></li>
<li>|</li>
<li><a href="">Store 9</a></li>
<li>|</li>
<li><a href="">Store 10</a></li>
</ul>

css

来源：https://stackoverflow.com/questions/75665772/i-want-to-have-a-different-color-for-list-in-odd-number-and-even-number-i-dont

2条答案

按热度按时间

c2e8gylq1#

基本上，看看你的html代码，a元素都是li元素的第一个唯一的查尔兹......所以，你的选择器是错误的。

<style>
    a { text-decoration:none; }
    .test { list-style-type: none;  }
    .test li { display: inline-block; font-size:18px; }
    .test li:nth-child(odd) a { color:blue; }
    .test li:nth-child(even) a { color:green; }
</style>

干杯

赞(0）回复(0）举报 2023-03-09

qncylg1j2#

您应该像这样更改HTML：

<ul class="test">
    <li><a href="">Store 1</a> | </li>
    <li><a href="">Store 2</a> | </li>
    <li><a href="">Store 3</a> | </li>
    <li><a href="">Store 4</a> | </li>
    <li><a href="">Store 5</a></li>
</ul>

<ul class="test">
    <li><a href="">Store 6</a> | </li>
    <li><a href="">Store 7</a> | </li>
    <li><a href="">Store 8</a> | </li>
    <li><a href="">Store 9</a> | </li>
    <li><a href="">Store 10</a></li>
</ul>

CSS来自：

.test li a:nth-child(odd) {
    color: blue;
}

.test li a:nth-child(even) {
    color: green;
}

致：

.test li:nth-child(odd) a {
    color: blue;
}

.test li:nth-child(even) a {
    color: green;
}

完整代码：
一个三个三个一个

赞(0）回复(0）举报 2023-03-09

我来回答

css 我想有一个不同的颜色为奇数和偶数列表,我不明白为什么我的代码不工作

2条答案

相关问题

热门标签

最新问答