Question

我希望这不会发布在其他地方，我肯定找不到。甚至不确定如何在搜索中解释它...基本上我想要针对所有其他“内容1”，说它们都有交替的背景。使用nth：child定位每个第二个li元素很容易，但是我无法弄清楚如何从不同的列表中选择每个其他的li子，以便“a”和“c”具有深色背景而“b”和“d”有默认样式。

<ul>
<li>content</li>
<li>content 1</li> //a//
</ul>

<ul>
<li>content</li>
<li>content 1</li> //b//
</ul>

<ul>
<li>content</li>
<li>content 1</li> //c//
</ul>

<ul>
<li>content</li>
<li>content 1</li> //d//
</ul>

编辑：我正在尝试在Wordpress安装中执行此操作，特别是内置博客模板中的特色图像。所以li元素是动态生成的，因此我没有直接的能力将类添加到li元素。虽然我可以在理论上编辑php，但我希望有一种方法可以通过CSS进行定位......

Answer 1

你严重过度复杂化了。

CSS：

.alt-row {
    background-color : #DDD;
}

HTML：

<ul>
<li>content</li>
<li>content 1</li> //a//
</ul>

<ul>
<li>content</li>
<li class="alt-row">content 1</li> //b//
</ul>

<ul>
<li>content</li>
<li>content 1</li> //c//
</ul>

<ul>
<li>content</li>
<li class="alt-row">content 1</li> //d//
</ul>

Answer 2

或者你可以通过这段代码简单地调用它：

ul:not(:first-child) > li:nth-of-type(2){
    color: red;
}

Demo here

在多个列表中定位每个其他单个li

2 个答案: