CSS - 第一個孩子選擇器不工作

Question

我正在使用bulma作爲css框架，並在我的頁面上有一個部分，我正在循環播放項目，並創建多行列。

<section class="section employees"> 
    <div class="container"> 
     <div v-for="(value, key) of employeesGroupedByDepartments"> 
      <div class="columns is-multiline department"> 
       <div class="title-with-line"> 
        <h4><span>{{ key }}</span></h4> 
       </div> 
       <div class="employee column is-3" v-for="employee of value"> 
        <div class="card"> 
         <figure class="image is-96x96"> 
          <img :src="employee.image.data.path" alt=""> 
         </figure> 
         <h4 class="title is-5"> 
          {{employee.title}} 
         </h4> 
         <h6 class="subtitle is-6"> 
          <small> 
           {{getExtras(employee, 'position')}} 
          </small> 
         </h6> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

我想刪除左填充每個第一個孩子列，我已經和設置甚至兩班padding left 0一樣重要，但沒有嘗試過的工作：

.employees { 

    .column:first-child, employee:first-child { 
      padding-left: 0!important; 
    } 
} 

我在做什麼錯？

Answer 1

.column不是第一個孩子，因爲你有一個類title-with-line的div繼續它。你在找什麼：

.employees { 
    .column:nth-child(2), .employee:nth-child(2) { 
     padding-left: 0!important; 
    } 
} 

Answer 2

A .column永遠不會是first-child，因爲在它之前始終有一個div.title-with-line。

從MDN：

的：第一胎CSS僞類表示一組同級元素中的第一元素。

您需要:nth-child或:nth-of-type選擇器。