Question

我的.links-image div应该有彩色边框，并且与白色边框交替，但所有边框的颜色保持不变。更改.links-image:nth-child(odd)上的颜色将更改所有边框的颜色，而不仅仅是奇数

<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;}

Answer 1

你的.grid包含另一个.grid，所以即使你把：nth-child放在右边的选择器上它也不会起作用。尝试修复代码，然后将：nth-child应用于.grid-cell

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

nth-child不交替div颜色

1 个答案: