gpt4 book ai didi

html - css:如何跳过第n个 child (奇数)和第n个 child (偶数)中隐藏的 child

转载 作者:太空狗 更新时间:2023-10-29 15:00:41 26 4
gpt4 key购买 nike

<分区>

我尝试在使用第 nth-child(odd) 和 nth-child(even) 时跳过隐藏的 child ,但它不会跳过那些隐藏的记录。

我有以下 HTML 和 CSS 代码。

<style>
ul {
list-style-type: none;
}
li {
height: 2em;
border: 1px solid black;
}
/* li:not(.hidden):nth-child(odd) { */
li:nth-child(odd) {
background: khaki;
}
li:nth-child(even) {
background: indianred;
}
.hidden {
display: none;
}
</style>


<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hidden">4</li>
<li class="hidden">5</li>
<li class="hidden">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>

我想在浏览器上显示的列表应该有替代颜色,而不管隐藏的 child 的数量。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com