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顏色

回答

相關問題