n-child不交替div颜色

-1

我有.links-image div应该有一个彩色的边框，并与白色边框交替，但所有边框的颜色保持不变。改变对.links-image:nth-child(odd)的颜色会改变颜色，所有边框不只是奇怪n-child不交替div颜色

<div class="fullcontainer"> 
<div class="container"> 
    <div class="content"> 
     <div class="links-container"> 


     <div class="links-wrap"> 
      <div class="grid grid--flexcells grid--gutters grid--full gridsm--full gridmd--1of2 gridlg--1of2"> 
       <div class="grid-cell"> 
        <div class="box"> 
         <a href="http://{!! $linksitem->link !!}"> 
         <div class="links-image"> 
          <img class="u-full-width-links" src="images/links/{{ $linksitem->img }}" /> 
           <div class="links-text-bg"> 
            <div class="links-text-left"> 
             <div class="links-text-top"><span class="links-text-url">test text</span></div> 
             <div class="links-text-bottom"><span class="rev-img-tag">text</span></div> 
            </div> 
           </div> 
         </div> 
         </a> 
        </div>    
       </div> 
       <div class="grid grid--flexcells grid--gutters grid--full gridsm--full gridmd--1of2 gridlg--1of2"> 
       <div class="grid-cell"> 
        <div class="box"> 
         <a href="http://{!! $linksitem->link !!}"> 
         <div class="links-image"> 
          <img class="u-full-width-links" src="images/links/{{ $linksitem->img }}" /> 
           <div class="links-text-bg"> 
            <div class="links-text-left"> 
             <div class="links-text-top"><span class="links-text-url">test text</span></div> 
             <div class="links-text-bottom"><span class="rev-img-tag">text</span></div> 
            </div> 
           </div> 
         </div> 
         </a> 
        </div>    
       </div> 
      </div> 
     </div> 
     </div><!--links container--> 
    </div><!--content end--> 



</div><!--container end--> 
</div><!--fullcontainer end--> 

.links-container{width:100%; height:auto; } 
.links-image { position: relative; width: 100%; border: 10px solid #fff;} 
.links-image:nth-child(odd) { position: relative; height:200px;width: 200px; border: 10px solid #282828;} 
.links-text-bg{ display:flex; flex-direction:row; position: absolute; left: 0; bottom:0;width: 100%; height:60px; 
background: rgb(0, 0, 0); /* fallback color */ background: rgba(0, 0, 0, 0.75); padding-left:20px; } 
.links-text-left{flex: 0 0 100%; height:70px;} 
.links-text-top{width:100%; height:30px; line-height:2; } 
.links-text-bottom{width:100%; height:40px; padding-top:2px;} 


.links-text-url{color: #DB016C; font-size: 20px; padding-top: 5px; } 
.links-wrap{margin-left:0px;}

来源

2015-07-20 tom harrison

'：第n-child'是指兄弟元素，和你的'链接，image'元素不是同级。另外，请在您的问题中发布[MCVE]（http://stackoverflow.com/help/mcve），不要只链接到jsFiddle。你看到了警告，但试图避开它。 – j08691

您.grid包含另一个.grid，因此，即使你把：第n个孩子在右边选择它将无法工作。尝试修复您的代码，则适用：第n个孩子到.grid细胞

.grid-cell:nth-child(odd) .links-image { 
    //put here whatever style you want 
}

来源

2015-07-20 19:58:31

感谢这很好 –

n-child不交替div颜色

回答

相关问题