主页 / 问题 / 1199713
Accepted
realHikkan
Asked:2021-11-04 03:49:51 +0000 UTC2021-11-04 03:49:51 +0000 UTC

如何使用 nth-child 缩进块

  • 772

锻炼：

30px为具有 class 的元素设置左右填充.card，从第 2 个元素开始，然后每 3 个元素（即，对于第 2 个、第 5 个等）

我尝试使用nth-childand缩进nth-of-type，但它不起作用。

https://codepen.io/realHikkan/pen/ZEORrGa?editors=1100

css

2 个回答

  1. Best Answer

    作品。你只是错过了第 17 行的一个点

    你：

    card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}

    必要的：

    .card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}
    • 1

  2. 一切正常

    .card:nth-child(1n+4) {
  margin-top: 30px;
}

card:nth-child(3n+2) {
  margin-right: 30px;
  margin-left: 30px;
}

    课堂上忘记的card点

    .parent {
    margin: 10px;
}

.child {
    display: inline-block;
    
    width: 20px;
    height: 20px;
    margin: 15px;
    
    background: red;
}

.child:nth-child(3n+2) {
    background: lime;
}
    <div class = 'parent'>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
    <div class = 'child'></div>
</div>

    • 0

相关问题