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

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就可以实现,但需要一些荒谬的选择器(请参阅此答案为例).

(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>