html - 定位多个列表中的每隔一个 li

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>