CSS中有没有一种方法可以访问element.xml中的元素。第一要素，第二要素？

Question

假设我有  <div class='r1'>               <div> Apple </div>               <div> Banana </div>               <div> Orange </div>               <div> Tulip </div>  </div>我想访问 r1 中的每个元素，但我必须给每个元素一个单独的 id 或类。有什么方法可以让我根据他们的职位数量来访问它。如  .r1:first-child{     color:red;   }  .r1:second-child{     color:blue;    }

Answer 1

您可以使用:nth-child()选择器。例如：

.r1:nth-child(1) {

  color: red;

}

.r1:nth-child(2) {

  color: blue;

}

您还可以酷公式的东西，如：

/* Will make every 5th element red, starting at the second one */

.r1:nth-child(5n+1) {

  color: red;

}

/* Will make the odd div elements blue */

.r1:nth-child(odd) div {

  color: blue;

}

Answer 2

.ri:nth-child(1) {

  color: red;

}

.ri:nth-child(2) {

  color: blue;

}