Question

我有以下结构：

<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. Element</div>
  <div>3. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
  <div class="alternate">5. Element with spec. Class</div>
  <div>9. Element</div>
  <div>10. Element</div>
  <div>11. Element</div>
</div>

之前和之后可能存在未知数量的多个元素，并且我无法添加＆＃34;包装＆＃34;使用class =＆＃34; alternate＆＃34;来围绕元素。（一切都会好的。）

我想给第一个.alternate元素一个边框顶部，最后一个.alternate元素一个边框底部。并且所有.alternate元素应该为每一行（偶数/奇数）具有不同的背景颜色。

我已经尝试过不同的方式了，我知道nth-type-n-child不会工作，因为我的.alternate元素周围没有包装div，所以它可以＆＃39;工作，因为所有元素都被计为偶数/奇数等等。

所以我用问题和可能的解决方案制作了一支笔：

http://codepen.io/emjay/pen/RpyyOo

我想问你，最好的方法是什么 - 不改变结构 - 。是否有一个有效的css解决方案？

感谢您的帮助！

Answer 1

对于第一个问题（将border-top添加到第一个.alternate元素，将border-bottom添加到最后一个.alternate元素），您可以通过添加{{1}来实现此目的单独来：

第一个border-top元素紧跟在:not()所有.alternate类的元素后面，
也到第一个没有紧跟在元素之后的.alternate类的元素。

如果第一个.alternate元素之前没有元素，您还需要将.alternate添加到同样为border-top的{{1}}元素中，，如果在上一个.alternate之后没有元素，则需要将:first-child添加到也是.alternate的{{1}}元素。

对于关于“斑马条纹”border-bottom元素的第二个问题，假设奇数元素或偶数元素是否具有替代.alternate是无关紧要的，您可以使用简单的:last-child来实现（或.alternate）伪类。但是，如果您要求第一个background元素始终具有相同的:nth-of-type()，无论其前面的元素数量是多少，您都需要使用JavaScript - 它可能是仅使用CSS但需要荒谬的数量的选择器（请参阅this answer作为示例）。

:nth-child()

.alternate

background

Answer 2

以@ Shaggy的答案为基础，使用:not＆amp; nth-of-type选择器，您可以渲染纯CSS中的所需内容。

参考代码：

＆＃13;

.elementWrapper div:not(.alternate)+div.alternate,
.elementWrapper div.alternate+div:not(.alternate) {
  border-top: 2px solid blue;
}

.elementWrapper div.alternate:nth-of-type(odd) {
  background: green;
}

.elementWrapper div.alternate:nth-of-type(even) {
  background: red;
}

＆＃13;

<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. Element</div>
  <div>3. Element</div>
  <div class="alternate">1. Element with spec. Class</div>
  <div class="alternate">2. Element with spec. Class</div>
  <div class="alternate">3. Element with spec. Class</div>
  <div class="alternate">4. Element with spec. Class</div>
  <div class="alternate">5. Element with spec. Class</div>
  <div>9. Element</div>
  <div>10. Element</div>
  <div>11. Element</div>
</div>

＆＃13;

正如OP所指出的，如果div元素之前或之后没有.alternate，则上述解决方案无法正常工作。那么first-child和last-child的使用将是首选。

/* if there are no elements before .alternate */
.elementWrapper > div.alternate:first-child{
  border-top: 2px solid blue;
}

/* if there are no elements after .alternate */
.elementWrapper > div.alternate:last-child{
  border-bottom: 2px solid blue;
}

Answer 3

如果您的.alternate元素集中在一个区域（也就是说，它们都在一起），您可以使用这些样式获得斑马样式：

.alternate {
  background: gray;
}

div:nth-of-type(odd):not(.alternate)+div.alternate~div.alternate:nth-of-type(even),
div:nth-of-type(odd):not(.alternate)+.alternate:nth-of-type(even),
div:nth-of-type(even):not(.alternate)+div.alternate~div.alternate:nth-of-type(odd),
div:nth-of-type(even):not(.alternate)+.alternate:nth-of-type(odd) {
  background: red;
}

<div class="wrap">
  <div class="col">
    <div class="elementWrapper">
      <div>1. Element</div>
      <div>2. Element</div>
      <div>3. Element</div>
      <div class="alternate">1. Element with spec. Class</div>
      <div class="alternate">2. Element with spec. Class</div>
      <div class="alternate">3. Element with spec. Class</div>
      <div class="alternate">4. Element with spec. Class</div>
      <div class="alternate">5. Element with spec. Class</div>
      <div>9. Element</div>
      <div>10. Element</div>
      <div>11. Element</div>
    </div>
  </div>
  <div class="col">
    <div class="elementWrapper">
      <div>1. Element</div>
      <div>2. Element</div>
      <div>3. Element</div>
      <div>4. Element</div>
      <div class="alternate">1. Element with spec. Class</div>
      <div class="alternate">2. Element with spec. Class</div>
      <div class="alternate">3. Element with spec. Class</div>
      <div class="alternate">4. Element with spec. Class</div>
      <div class="alternate">5. Element with spec. Class</div>
      <div>10. Element</div>
      <div>11. Element</div>
      <div>12. Element</div>
    </div>
  </div>
</div>

首先，偶数/奇数和最后一个元素与类，没有包装，以及其他元素（第n类行为）:)

3 个答案: