主页 / coding / 问题 / 79545616
Accepted
Gary
Asked: 2025-03-31 14:32:19 +0800 CST

有没有通过同一个类的相对位置来选择子元素的方法？[重复]

  • 772

此示例提供了选择“subhead”类的第一个、第二个和第三个子元素的预期结果。但是，我的问题是，是否有任何选择方法可以选择“subhead”类的第一个、第二个和第三个出现，而不管其在父级中的确切子位置，以便在事先不知道这些位置时可以工作；我们可以使用位置 1,2,3 而不是 1,3,5，因为它不知道每个子标题之间有多少个兄弟元素？

谢谢。

div.scrl_can * {
  height:25px;
  border: 1px solid black;
}
.subhead:nth-of-type(1) {
  background-color: blue;
}
.subhead:nth-of-type(3) {
  background-color: green;
}
.subhead:nth-of-type(5) {
  background-color: yellow;
}
<div id="main">
  <div>
    <div>
      <div class="scrl_can">
        <div class="subhead"></div>
        <div></div>
        <div class="subhead"></div>
        <div></div>
        <div class="subhead"></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    您可以使用of selector以下语法nth-child：

    div.scrl_can * {
  height:25px;
  border: 1px solid black;
}
.subhead:nth-child(1 of .subhead) {
  background-color: blue;
}
.subhead:nth-child(2 of .subhead) {
  background-color: green;
}
.subhead:nth-child(3 of .subhead) {
  background-color: yellow;
}
    <div id="main">
  <div>
    <div>
      <div class="scrl_can">
        <div class="subhead"></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="subhead"></div>
        <div></div>
        <div></div>
        <div class="subhead"></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

    • 2

相关问题