Question

如何设置此HTML中第n个按钮的样式：

<div class="k-klas">
<div>
    <p>
        <button>Inschrijven</button>
    </p>
<div>
<div>
    <p>
        <button>Inschrijven</button>
    </p>
</div>
<div>
    <p>
        <button>Inschrijven</button>
    </p>
</div>

宽度这个CSS：

.k-klas button:nth-child(1) {background:#f00;}
.k-klas button:nth-child(2) {background:#0f0;}

两个按钮都是红色的......

Answer 1

您的HTML不正确。你需要关闭div的第一个标签

你需要使用nth-child（）代替div而不是按钮。

.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}
.k-klas div:nth-child(3) button {background:#000;}

<div class="k-klas">
  <div>
      <p>
          <button>Inschrijven 1</button>
      </p>
  </div>
  <div>
      <p>
          <button>Inschrijven 2</button>
      </p>
  </div>
  <div>
      <p>
          <button>Inschrijven 3</button>
      </p>
  </div>
</div>

Answer 2

我提出的最好的是：

.k-klas div:nth-child(1) button {background:#f00;}
.k-klas div:nth-child(2) button {background:#0f0;}

你看起来不是按钮。

Answer 3

您未正确定位按钮。

按钮始终是第一个子项。也就是说，p标签的第一个（也是唯一的）子项是按钮。

您需要定位他们所居住的div，因为它是那些有多个兄弟姐妹的人。

.k-klas div:nth-child(1) button { background:#f00; }
.k-klas div:nth-child(2) button { background:#0f0; }

Answer 4

尝试定位.k-klas div的直接孩子。

.k-klas>div:nth-child(1) button{
  background: #f00;
}

.k-klas>div:nth-child(2) button{
  background: #0f0;
}

＆＃39;＆GT;＆＃39; selector用于选择css中的直接子节点。

与nth-child（）的样式按钮

4 个答案: