Início / coding / Perguntas / 79545616
Accepted
Gary
Asked: 2025-03-31 14:32:19 +0800 CST

Existe algum para selecionar elementos filhos pela posição relativa da mesma classe? [duplicado]

  • 772

Este exemplo fornece o resultado desejado de selecionar o primeiro, segundo e terceiro elementos filhos que são da classe "subhead". No entanto, minha pergunta é: existe algum método de seleção que selecione a primeira, segunda e terceira ocorrências da classe "subhead" independentemente de sua posição exata de filho no pai, de modo que isso funcione quando não se sabe com antecedência quais serão essas posições; e poderíamos usar as posições 1,2,3 em vez de 1,3,5, já que não se saberá quantos elementos irmãos estarão entre cada subhead?

Obrigado.

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 respostas

  1. Best Answer

    Você pode usar a of selectorsintaxe denth-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

relate perguntas