我使用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;
}
}
我做错了什么?
答案 0 :(得分:7)
.column
永远不会是first-child
,因为它之前总是有div.title-with-line
。
来自MDN:
:first-child CSS伪类表示一组兄弟元素中的第一个元素。
您需要:nth-child
或:nth-of-type
选择器。
答案 1 :(得分:1)
.column
不是第一个孩子,因为你有一个div title-with-line
继续它。您正在寻找的是:
.employees {
.column:nth-child(2), .employee:nth-child(2) {
padding-left: 0!important;
}
}