创建具有不同配色方案的对象

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 或类每个具有不同的背景颜色并将它们放在 dividually 在 HTML 代码，我想知道有没有办法可以自动设置下一篇文章的背景颜色与上一篇文章相反？

Answer 1

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

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

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

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

Answer 2

关闭@Chris 但你需要使用 2n:

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

这是fiddle

创建具有不同配色方案的对象

creating objects with different color schemes

html

css

article