web-dev-qa-db-fra.com

sélecteurs css pour appliquer des règles à plusieurs classes d'éléments similaires

J'ai un simple tableau

<tr>
     <td class="first">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth">Someone else is fourth</td>
     <td class="fifth">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

Je veux appliquer les règles CSS sur certaines des classes dans td uniquement. Je peux écrire quelque chose comme-

td.first, td.fourth, td.fifth
{
    color:purple;
}

Cela marche. Ou je peux utiliser des cours. Je me demandais s'il y avait un moyen efficace/meilleur d'écrire des sélecteurs dans un tel cas.

Ma préoccupation: Est un navigateur, va rechercher toutes les classes, puis recherche td pour chaque séparation par virgule. Cela signifie qu'il va trouver les trois classes et ensuite évaluer tag. Existe-t-il un moyen pour que le navigateur trouve les trois classes, puis associe l'étiquette à une autre classe?.

htmlcsscss-selectors
10
KhanSharp

Répondre à votre préoccupation

Vous dites:

Mon problème: Est-ce que le navigateur, va rechercher tous les td pour chaque séparation Par une virgule et trouver la correspondance de classe. Cela signifie qu’il trouvera trois fois tous les tags Td. Si cela est vrai, comment puis-je faire en sorte que le navigateur recherche Une fois les balises td, puis trouve des correspondances de classe.

Mais ce n’est pas ainsi que css évalue, puisqu’il va de droite à gauche . Dans le cas où vous donnez:

td.first, td.fourth, td.fifth
{
    color:purple;
}

Donc, il ne cherchera pas "trois fois" à travers les éléments td. Au lieu de cela, il correspondra à la classe .first de votre document (où que ce soit), puis vérifiera s'il est appliqué à l'élément td et, si tel est le cas, correspond. Puis évaluez .fourth, etc. de la même manière.

Donc, si votre préoccupation concerne les itérations à travers des éléments td, votre préoccupation est invalide. Votre code est efficace tel quel.

19
ScottS

Pour des propriétés spécifiques, vous pouvez créer des classes distinctes. Par exemple, dans votre cas, vous pouvez créer une classe .color et écrire comme ceci:

<tr>
     <td class="first color">I am the first</td>
     <td class="second">You are the second</td>
     <td class="third">He is third</td>
     <td class="fourth color">Someone else is fourth</td>
     <td class="fifth color">That guy is fifht</td>
     <td class="sixth">Who care's about sixth</td>
</tr>

.color{color:purple;}
3
Hiral

Vous pouvez utiliser la propriété : nth-child pour obtenir la même chose sans donner toutes ces classes différentes à vos TD.

c'est à dire:

td:nth-child(1), 
td:nth-child(4), 
td:nth-child(5) {
    color:purple;
}
0
silicakes