<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只有解决方案吗？
谢谢你的帮助！
解决方法
>第一个.alternate元素紧跟在一个元素上,该元素使:not()具有.alternate类,并且,
>也是第一个没有.alternate类的元素,它紧跟在一个元素之后.
在第一个.alternate元素之前没有元素的情况下,您还需要将border-top添加到.alternate元素,该元素也是：first-child,并且在最后一个元素之后没有元素的情况下.alternate,您需要将border-bottom添加到.alternate元素,该元素也是：last-child.
对于关于“斑马条纹”的第二个问题,.alternate元素,假设奇数或偶数元素是否具有交替背景是无关紧要的,你可以用一个简单的：nth-of-type()(或：nth-child( ))伪类.但是,如果您需要第一个.alternate元素始终具有相同的背景而不管其前面的元素数量,您将需要求助于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>
