我如何在每个4 * 4网格的第一列上应用CSS

Question

<div class="row">
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
  <div class="col-lg-4">col lg 4</div>
</div>

如何在每个4 * 4网格的第一列上应用CSS

我尝试

.row div:nth-child(4n+0) { margin-left: 0px; }

注意：为此，我只需要CSS解决方案

see image here

Answer 1

div {
float:left;
height:100px;
width:25%;
background-color:pink;
margin-bottom:10px;
}
div:nth-child(4n-3) {
background-color:green;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>

Answer 2

使用“第一个孩子”伪类

CSS代码

 div p:first-child{
        color:red;
     }

HTML代码

<div>
     <p>first </p>
     <p>second</p>
     <p>third </p>
     <p>fourth </p>
  </div>    
  <div>
     <p>first </p>
     <p>second</p>
     <p>third </p>
     <p>fourth </p>
  </div>
  <div>
     <p>first </p>
     <p>second</p>
     <p>third </p>
     <p>fourth </p>
  </div>

它将仅更改第一段的颜色。