Que signifie le "& " sélecteur de choisir?

Dans cette codepen il y a un sélecteur css &:hover ce n'est que le sélecteur de match?

  • Si vous regardez attentivement, vous pourriez probablement avoir vu qu'il y a (SCSS) écrit à côté de l'onglet CSS titre.
  • en supposant que le commentaire a été adressée à moi, alors oui: j'ai fait voir que. J'ai été, cependant, en traitant de l'énoncé explicite dans la question elle-même: "...il y a un sélecteur css &:hover." Peut-être que j'aurais du fait que de plus en plus clair, si.
InformationsquelleAutor ilivewithian | 2012-07-04
  1. 37

    Je crois que l'esperluette est un Sass fonctionnalité. À partir de la documentation:

    Référencement Parent Sélecteurs: &

    Il est parfois utile d'utiliser un imbriquée règle du parent sélecteur dans d'autres
    les moyens que la valeur par défaut. Par exemple, vous pourriez avoir de spécial
    styles pour lorsque ce sélecteur est planait au-dessus ou lorsque le corps
    élément a une certaine classe. Dans ces cas, vous pouvez explicitement
    spécifier l'endroit où les parents du sélecteur doit être inséré à l'aide de la &
    caractère.

    InformationsquelleAutor Chris Laplante
  2. 37

    Exactement. Dans Sass vous pourriez avoir quelque chose comme ça...

     div {
    background: green;

    p {
        background: red;

        &:hover {
            background: blue;
        }

        &:active {
           background: blue; 
        }
    }   
}

    ...qui lors de la conversion en CSS deviendrait ce:

    div {
    background: green;
}

div p {
    background: red;
}

div p:hover {
    background: blue;
}

div p:active {
    blue;
}

    Edit: a partir de &hover: &:hover

    • Sur votre deuxième bloc de code, il ne devrait pas être div p:hover { background: blue; } et div p:active { background: blue; } ? Je viens de le mentionner clair...
    • Oui. Bien sûr. Je prie de m'excuser. Erreur stupide. Fixe.
    InformationsquelleAutor banzomaikaka
  3. 4

    L'utilisation qui est moins connu est que vous pouvez ajouter de l'esperluette à la fin d'un style de sorte que le parent sélecteur devient l'enfant.

    par exemple: 

     h3
   font-size: 20px
   margin-bottom: 10px

 .some-parent-selector &
   font-size: 24px
   margin-bottom: 20px

    devient,

      h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .some-parent-selector h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

    vous pouvez lire plus au sujet de & utiliser ici

    http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

    InformationsquelleAutor user1095118