如何将备用行颜色添加到CSS类

Question

如何为此类添加备用行颜色：

when().
    get("/restapi").
then().
    body("text.findAll{ it.name == 'ABC' }.id", hasItem("123"));

我看到这样的说明：

https://www.w3.org/Style/Examples/007/evenodd.en.html

Alternate table row color using CSS?

https://www.sitepoint.com/premium/books/the-css3-anthology-4th-edition/preview/how-do-i-display-table-rows-in-alternating-colors-4bcb9a2

但这似乎比这更复杂。你能帮忙吗？

谢谢！

Answer 1

像这样使用

.widget li:nth-child(even){
       background: #CCC
 }

.widget li:nth-child(odd){
       background: #000
 }

Answer 2

目前还不清楚是否需要li元素上的备用文本颜色或类widget的div。如果您的意思是后者，请尝试以下方法：

.widget {
  color: myoddcolr;
}

.widget:nth-of-type(odd) {
  color: myoddcolr;
}

Answer 3

您可以这样使用：nth-​​child（2n + 1）。我希望这会对你有帮助！

＆＃13;

＆＃13;

.widget {
		padding-left: 0px;
	}
	.widget li{
		margin-top: 1px;
		padding: 5px;
	}
	.widget li:nth-child(2n+1){
		background: #ccc;
	}
	.widget li:nth-child(2n+2){
		background: #eee;
	}

＆＃13;

<ul class="widget">
	<li>Row - 1</li>
	<li>Row - 2</li>
	<li>Row - 3</li>
	<li>Row - 4</li>
	<li>Row - 5</li>
	<li>Row - 6</li>
</ul>

＆＃13;

＆＃13;

＆＃13;