Question

我有4列，我希望每一列都有不同的边框颜色，而不是为每一列添加特定的类。

所以，我正在考虑使用:nth-child来完成这项工作。这是jsfiddle

我有这个标记：

        <div class="container">
        <div class="row">


          <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        <div class="col-lg-6 flush-col">

          <div class="thumbnail">



          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        </div>  



        <div class="row">
         <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>

        <div class="col-lg-6 flush-col">

          <div class="thumbnail">


          <h3>DUMMY CONTENT</h3>

         </div>

          </div>
        </div>

      </div>

这是css：.thumbnail:nth-child(1) {border:1px solid red;}

但这改变了所有列，而不仅仅是我希望改变的列。我怎样才能做到这一点？

Answer 1

此时您无法使用：nth-child因为.thumbnail始终是第一个孩子：

你有2行，所以你可以在每行内使用first-child和last-child：

.container .row:first-child .flush-col:first-child .thumnail {border:1px solid red;}
.container .row:first-child .flush-col:last-child .thumnail {border:1px solid blue;}
.container .row:last-child .flush-col:first-child .thumnail {border:1px solid black;}
.container .row:last-child .flush-col:last-child .thumnail {border:1px solid yellow;}

或与：nth-child

.container .row:nth-child(1) .flush-col:nth-child(1) .thumnail {border:1px solid red;}
.container .row:nth-child(1) .flush-col:nth-child(2) .thumnail {border:1px solid blue;}
.container .row:nth-child(2) .flush-col:nth-child(1) .thumnail {border:1px solid black;}
.container .row:nth-child(2) .flush-col:nth-child(2) .thumnail {border:1px solid yellow;}

引导程序中的nth-child伪选择器

1 个答案: