Updated Fiddle

Question

我正在尝试为<div class="about-text-wrap">上的第一项添加边框但是我已经尝试了我能想到的每个css类的组合，以nth-child为目标，但没有任何工作

<div class="block-wrap">
  <div class="grid grid--gutters grid--full gridmd--1of3 gridlg--1of3  gridxl--1of3">
<div class="cell">
  <div class="about-img"><img src="../../../assets/img/brush.png"/></div>
  <div class="about-text-wrap">
    <div class="about-title">
      <h3>
        Designed by <br/>10 STRV Designers
      </h3>
    </div>
    <div class="about-text">
      <h5>Every piece of this car is handmade</h5>
    </div>
  </div>
</div>
<div class="cell">
  <div class="about-img"><img src="../../../assets/img/flower.png"/></div>
  <div class="about-text-wrap">
    <div class="about-title">
      <h3>
        Designed by <br/>10 STRV Designers
      </h3>
    </div>
    <div class="about-text">
      <h5>Every piece of this car is handmade</h5>
    </div>
  </div>
</div>
<div class="cell">
  <div class="about-img"><img src="../../../assets/img/heart.png"/></div>
  <div class="about-text-wrap">
    <div class="about-title">
      <h3>
        Designed by <br/>10 STRV Designers
      </h3>
    </div>
    <div class="about-text">
      <h5>Every piece of this car is handmade</h5>
    </div>
   </div>
  </div>
 </div>
</div>

 .grid { position:relative; display: flex; flex-wrap: wrap; flex-direction:row ;list-style: none; margin: 0; padding: 0; }
 .cell { position:relative; flex:1;flex-direction: column; display:flex; align-items: center; text-align:left;}

.block-wrap{position:absolute; 
top:0;
bottom:330px;
left:0;
right:0;
max-width:1000px; /* Assign a value */
min-height:500px;; /* Assign a value */
margin:auto; background:#fff;
box-shadow: 0px 2px 34px 0px rgba(221,221,221,1); }
 .about-img {padding:20px;}
 .about-text-wrap{height:auto; width:100%; }
 .block-wrap .cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;}
 .grid .cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;}
 .cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;}
 .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;}
.about-title{padding:0 30px;}
.about-text{padding:10px 30px; color:#d0d0d0;}

Answer 1

正确的选择器是：

.cell:nth-child(2) .about-text-wrap {
    height: auto;
    width: 100%;
    border-right: 1px solid #e7e7e7;
}

这就是说将样式应用于位于about-text-wrap的第二个实例（nth-child(2)）中的.cell元素

Updated Fiddle

Answer 2

使用此：

.about-text-wrap > :nth-child(1) {
  border-right:1px solid black;
}

使用>，您只选择直接子项，:nth-child(1)选择第一项（在本例中）。如果您不使用>，则选择所有后代，以及任何位于下方的任何项目。

＆＃13;

.grid { position:relative; display: flex; flex-wrap: wrap; flex-direction:row ;list-style: none; margin: 0; padding: 0; }
.cell { position:relative; flex:1;flex-direction: column; display:flex; align-items: center; text-align:left;}
.about-text-wrap > :nth-child(1) {
  border-right:1px solid black;
}
.block-wrap{position:absolute; 
    top:0;
    left:0;
    right:0;
    max-width:1000px; /* Assign a value */
    min-height:500px;; /* Assign a value */
    margin:auto; background:#fff;
    box-shadow: 0px 2px 34px 0px rgba(221,221,221,1); }
.about-img {padding:20px;}
.about-text-wrap{height:auto; width:100%; }

 
 .about-text-wrap{height:auto; width:100%; }
.about-title{padding:0 30px;}
.about-text{padding:10px 30px; color:#d0d0d0;}

＆＃13;

<div class="block-wrap">
  <div class="grid grid--gutters grid--full gridmd--1of3 gridlg--1of3 gridxl--1of3">
    <div class="cell">
      <div class="about-img"><img src="../../../assets/img/brush.png"/></div>
      <div class="about-text-wrap">
        <div class="about-title">
          <h3>
            Designed by <br/>10 STRV Designers
          </h3>
        </div>
        <div class="about-text">
          <h5>Every piece of this car is handmade</h5>
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="about-img"><img src="../../../assets/img/flower.png"/></div>
      <div class="about-text-wrap">
        <div class="about-title">
          <h3>
            Designed by <br/>10 STRV Designers
          </h3>
        </div>
        <div class="about-text">
          <h5>Every piece of this car is handmade</h5>
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="about-img"><img src="../../../assets/img/heart.png"/></div>
      <div class="about-text-wrap">
        <div class="about-title">
          <h3>
            Designed by <br/>10 STRV Designers
          </h3>
        </div>
        <div class="about-text">
          <h5>Every piece of this car is handmade</h5>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

在嵌套div中定位nth-child

2 个答案:

Updated Fiddle