用不同的配色方案创建对象

Question

article {
	background-color:#d5ecf2;
	width:1024px;
	height:200px;
	margin: 0 auto;
}
.articletext {
	float:right;
	height:180px;
	width:720px;
	margin:10px;
}

		<article>
        <div class="articletext">
			<h3>GDS 114.01: HTML and Javascript</h3>
			<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		</article>
		<hr>
		<article>
		<div class="articletext">
			<h3>GDS 115.01: Digital Graphics for Gaming</h3>
			<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>	
		</article>
		<hr>
		<article>
		<div class="articletext">
			<h3>Personal Work</h3>
			<p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		</article>

在我的一个页面上，我有4篇文章，每篇都有相同的颜色背景（＃d5ecf2）。我的想法是让这些文章（以及任何未来的文章）在前面提到的十六进制颜色和另一种十六进制颜色之间来回旋转（＃7c96a5）。一种方式（我想你可以称之为漫长的方式）是有两个div id或类，每个都有不同的背景颜色，并将它们单独放在HTML代码中，我想知道是否有一种方法可以自动设置下一篇文章的背景颜色与之前的背景颜色相反？

Answer 1

如果它们都出现在同一页面上，您可以使用nth-child CSS selector：

article:nth-child(odd) {
  background: #7c96a5;
}

或者，由于容器div中有其他元素，请使用nth-of-type：

article:nth-of-type(odd) {
  background: #7c96a5;
}