我在尝试在代码上设置div标签时遇到问题,您可以检查以下jsfiddle我的内容。
CSS
std::make_index_sequence
HTML
.container {
width: 200px;
margin: 0 auto;
}
.item {
line-height: 25pt;
border: solid 1px black;
}
.container div:nth-of-type(odd) {
background: red;
}
.container div:nth-child(odd) {
background: blue;
}
我正在使用自动生成代码的工具,因此我无法更改此代码。我试过使用nth-of-type和nth-child都有奇数和偶数但没有运气。任何帮助,将不胜感激。感谢。
答案 0 :(得分:2)
如果我理解你,你试图在每个奇数列表项和每个偶数列表项中选择第一个div
.container {
width: 200px;
margin: 0 auto;
}
.item {
line-height: 25pt;
border: solid 1px black;
}
.container li:nth-of-type(odd) div {
background: red;
}
.container li:nth-child(even) div{
background: blue;
}
<ul class="cb-list">
<div class="container">
<li>
<div class="item">
<div class="detail">
First Record
</div>
</div>
</li>
<li>
<div class="item">
<div class="detail">
Second Record
</div>
</div>
</li>
</div>
</ul>
我正在使用自动生成代码的工具,所以我不是 能够更改此代码
但是ul中的div无效see here
答案 1 :(得分:2)
已更新,未更改html。
你要改变的类是li里面,而不是div, 你错过了代码中的1个级别。
.container {
width: 200px;
margin: 0 auto;
}
.item {
line-height: 25pt;
border: solid 1px black;
}
.container li:nth-of-type(odd) {
background: red;
}
.container li:nth-child(odd) {
background: blue;
}
<ul class="cb-list">
<div class="container">
<li>
<div class="item">
<div class="detail">
First Record
</div>
</div>
</li>
<li>
<div class="item">
<div class="detail">
Second Record
</div>
</div>
</li>
</div>
</ul>