Início / coding / Perguntas / 79334255
Accepted
Pall Arpad
Asked: 2025-01-07 04:27:42 +0800 CST

Seletores de aninhamento (&) necessários para direcionar elementos HTML aninhados

  • 772

Estou realmente confuso se devemos ou não usar o &seletor de aninhamento na seguinte situação

.my-class {
  & > a {
    color: yellow;
  }
}

Contra

.my-class {
  > a {
    color: yellow;
  }
}

De acordo com Kevin Powell, o seletor de aninhamento é necessário quando direcionamos elementos: https://www.youtube.com/watch?v=ljDIcBp-9sQ

Mas o segundo exemplo também funciona muito bem, além de fazer muito mais sentido porque é mais limpo e nos acostumamos com ele a partir do SASS.

css

1 respostas

  1. Best Answer

    O &seletor no aninhamento CSS se refere explicitamente ao seletor pai, garantindo clareza, especialmente em estilos complexos:

    .my-class {
    & > a {
        color: yellow;
    }
}

    Isso compila para .my-class > a.

    Omitir &também funciona porque o Módulo de Aninhamento CSS permite seletores filhos diretos (apenas para sintaxe simples, não para complexa):

    .my-class {
    > a {
        color: yellow;
    }
}

    Isso também compila para .my-class > a.

    Ambos são válidos. Use &para explicitude em contextos complexos (por exemplo, modificadores ou pseudoclasses). Omita para seletores filhos diretos mais limpos e simples.

    • 1

relate perguntas