无法使用：nth-​​child（-n + 2）选择前两个子元素

Question

我是n个孩子的新手。在我只是向元素添加一个额外的类之前，但是现在我想将工作保留在CSS中。我正在尝试在.content div中抓取前两个div（更改一些道具），然后抓取最后两个div（更改一些不同道具）。我只想从最大宽度为768px的媒体查询开始访问此文件。从教程中，我看到语法看起来正确（.services .content：nth-​​child（-n + 2）），我不知道为什么它不起作用？

https://jsfiddle.net/xjq4rf25/

    <section class="services" id="services">
    <div class="wrapper">
      <h1>Services</h1>
    </div>

    <div class="content">
      <div>
        <ul class="skills">
          <li><p style="color: rgba(102,102,102, 0.85);">Flatwork</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
        </ul>
      </div>

      <div class="move">
        <ul class="skills">
          <li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
        </ul>
      </div>

      <div>
        <ul class="skills">
          <li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
        </ul>
      </div>

      <div>
        <ul class="skills">
          <li><p style="color: rgba(102,102,102, 0.85);">Demolition</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Grading/Clean up</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
          <li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>               
        </ul>
      </div>
    </div>
  </section>

Answer 1

尝试一下：

List<string> listofCustomers  = new List<string>();
List<List<baseVehicle>> customerVehicles = new List<List<baseVehicle>>();

string[] lines = File.ReadAllLines("Customer.CSV");

string customer = "";
customer = lines[0];
listofCustomers.Add(customer);
customerVehicles.Add(new List<baseVehicle>());
for (int i = 1; i < lines.Length; i++)
{
    string[] bits = lines[i].Split(',');
    if (bits[0].ToUpper() == "Car".ToUpper())
    {
        Car Car = new Car(bits[0], bits[1], bits[2], int.Parse(bits[3]), int.Parse(bits[4]), int.Parse(bits[5]), bits[6], bits[7], int.Parse(bits[8]), double.Parse(bits[9]), bool.Parse(bits[10]));
       customerVehicles.Last().Add(Car);
    }
    if (bits[0].ToUpper() == "Truck".ToUpper())
    {
        Truck Truck = new Truck(bits[0], bits[1], bits[2], int.Parse(bits[3]), int.Parse(bits[4]), int.Parse(bits[5]), bits[6], bits[7], int.Parse(bits[8]), int.Parse(bits[9]), int.Parse(bits[10]));
        customerVehicles.Last().Add(Truck);
    }
    if (bits[0].ToUpper() == "Helicopter".ToUpper())
    {
        Helicopter Helicopter = new Helicopter(bits[0], bits[1], bits[2], int.Parse(bits[3]), int.Parse(bits[4]), int.Parse(bits[5]), bits[6], bits[7], bool.Parse(bits[8]), int.Parse(bits[9]), int.Parse(bits[10]));
        customerVehicles.Last().Add(Helicopter);
    }
    if (bits[0].ToUpper() == "Plane".ToUpper())
    {
        Plane Plane = new Plane(bits[0], bits[1], bits[2], int.Parse(bits[3]), int.Parse(bits[4]), int.Parse(bits[5]), bits[6], bits[7], bool.Parse(bits[8]), int.Parse(bits[9]), int.Parse(bits[10]), int.Parse(bits[11]), bits[12]);
        customerVehicles.Last().Add(Plane);
    }
    else if(bits[0] == "" )
    {
        return;
    }
}

演示：https://jsfiddle.net/qhp1uneb/

Answer 2

另一个解决方案是：

.services .content div:nth-child(-n+2) {
  background-color:red;
}

.services .content div:nth-child(n+3) {
  background-color:blue;
}