时间戳

首页 > 解决方案 > CSS跳过第一个

html - CSS跳过第一个

问题描述

所以我正在使用一个允许我提供 CSS 样式表的工具，但我遇到了一些问题。

在我的原始 HTML 代码中，DIV 中有许多 DIV，这使得修复代码有点困难。在我的原始代码中，DIV 代表组，在第一组中，我想像分配给其他组一样分配不同的样式。

在下面的示例中，我想将样式添加到第一个<div class="Test2">，而不是第二个和第三个。我尝试过使用 :not(:first-child)，或者你可以看到的类似的东西，但它们都不起作用。

请帮帮我！

.Test1 {
  background: #ff0000;
  color: green;
}

.Test2 {
  color: blue;
}

.Test2 div:nth-child(1n+2) {
  color: yellow;
}
<body>
  <div class="Test1">
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
  </div>
</body>

标签： htmlcss

解决方案

有多种方法可以做到这一点，您可以使用:first-of-type来确保具有类Test-2和类型的第一个元素div会受到影响。

.Test1 {
  background: #ff0000;
  color: green;
}

.Test2:first-of-type {
  color: blue;
}

.Test2 {
  color: yellow;
}
<body>
  <div class="Test1">
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
    <div class="Test2">
       <span>The first paragraph.</span>
    </div>
    <div class="Test3">
      <div>dummy</div>
      <p>Test</p>
    </div>
  </div>
</body>

推荐阅读