css - 以第一个、偶数/奇数和最后一个元素为目标，带有类，没有包装器，以及其他元素(nth-of-class 行为):)

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>

前后可以有未知数量的多个元素，我不可能在 class="alternate"的元素周围添加一个“包装”div。 (在那里一切都会好起来的)。

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

我尝试过不同的方法，我知道 nth-of-type 和 nth-child 不会工作，因为我的 .alternate 元素周围没有包装 div，所以它不能工作，因为所有元素都计算为偶数/奇数等等。

所以我把问题和可能的解决方案写成了笔:

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

我想问你，在不改变结构的情况下，最好的方法是什么。是否有仅适用于 CSS 的解决方案？

感谢您的帮助!

Answer 1

对于第一个问题(将 border-top 添加到第一个 .alternate 元素并将 border-bottom 添加到最后一个 。 alternate 元素)，您可以通过将 border-top 单独添加到:

• 第一个 .alternate 元素紧跟在执行 :not() 的元素之后有 .alternate 类，并且，
• 也第一个没有 .alternate 类的元素紧跟在一个有的元素之后。

如果第一个 .alternate 元素之前没有元素，您还需要将 border-top 添加到 .alternate 元素也是 :first-child 并且，如果在最后一个 .alternate 之后没有元素，则需要添加 border -bottom 到 .alternate 元素，它也是 :last-child。

对于关于“斑马条纹”的第二个问题，.alternate 元素，假设奇数或偶数元素是否具有交替的 background 无关紧要，您可以使用一个简单的 :nth-of-type()(或 :nth-child())伪类。但是，如果您需要第一个 .alternate 元素始终具有相同的 background 而不管其前面的元素数量如何，您将需要求助于 JavaScript - 它是可能单独使用 CSS，但需要荒谬数量的选择器(参见 this answer 作为示例)。

(function(){
  var wrappers=document.querySelectorAll(".elementWrapper"),
      x=wrappers.length,
      divs,y,alt;
  while(x--){
    divs=wrappers[x].querySelectorAll(".alternate");
    y=divs.length;
    alt=!(y%2);
    while(y--)
      divs[y].classList.add((alt=!alt)?"odd":"even");
  }
})();
/** JQuery **/
//$('.alternate:odd').addClass('odd')
//$('.alternate:even').addClass('even');

.elementWrapper>div:not(.alternate)+div.alternate,
.elementWrapper>div.alternate+div:not(.alternate),
.elementWrapper>div.alternate:first-child{
  border-top:1px solid #000;
}
.elementWrapper>div.alternate:last-child{
  border-bottom:1px solid #000;
}
.elementWrapper>div.alternate.odd{
  background:#ccc;
}
.elementWrapper>div.alternate.even{
  background:#eee;
}

/** Uncomment below for CSS-only zebra-striping **/
/*.elementWrapper>div.alternate:nth-of-type(odd){
  background:#ccc;
}
.elementWrapper>div.alternate:nth-of-type(even){
  background:#eee;
}*/

/** "housekeeping" **/.elementWrapper{background:#fff;color:#000;margin:0 0 20px;}.elementWrapper>div{font-family:sans-serif;font-size:14px;overflow:hidden;padding:5px;text-overflow:ellipsis;white-space:nowrap;}

<div class="elementWrapper">
  <div>1. 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>
<div class="elementWrapper">
  <div>1. Element</div>
  <div>2. 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>