les sélecteurs css pour appliquer les règles de plusieurs la classe d'un élément similaire

J'ai un tableau simple

<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 des règles css sur certains de classes dans les td. Je peux écrire quelque chose comme-

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

Cela fonctionne. Ou je peux utiliser les classes. Je me demandais, est-il efficace/mieux la façon d'écrire des sélecteurs dans de tels cas.

Mon inquiétude:
Est navigateur, va regarder pour toute la classe et ensuite, la recherche de la td pour chaque virgule de séparation. Cela signifie qu'il va trouver tous les trois classes et d'en évaluer la balise. Est-il possible que le navigateur trouverez tous les trois classes, puis les matches de la balise autre que l'aide d'une seule classe.

OriginalL'auteur KhanSharp | 2013-11-09

  1. 19

    Répondre À Votre Préoccupation

    Vous de l'état:

    Mon inquiétude: Est navigateur, va chercher tous les td pour chaque virgule
    de séparation et de trouver la correspondance de la classe. Cela signifie qu'il va trouver tous les
    balises td trois fois. Si cela est vrai, comment puis-je faire navigateur de recherche
    pour les balises td une fois, et ensuite trouver la classe matchs.

    Mais ce n'est pas comment css évalue, comme il va de droite à gauche. Dans le cas que vous lui donnez:

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

    De sorte qu'il ne recherche pas de "trois fois" à travers td éléments. Plutôt, elle correspond à la .first classe dans votre document (où il est), puis vérifier pour voir si elle est appliquée à td élément, et si oui, match. Puis d'évaluer les .fourth, etc. dans un mode similaire.

    Donc, si votre souci est d'itérations à travers td éléments, votre préoccupation est pas valide. Votre code est efficace comme il est.

    OriginalL'auteur ScottS

  2. 3

    Pour des propriétés spécifiques, vous pouvez créer des classes séparées.
    Par exemple, dans votre cas, vous pouvez faire 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;}
    Je suis d'accord de classe serait plus rapide. Est-il un css de façon à définir les sélecteurs de trouver plusieurs classes dans un type d'élément
    Excellente solution, bien que je voudrais essayer d'éviter d'utiliser le nom de la classe "violet" lui-même... il perd son sens si vous décidez qu'ils devraient être d'une couleur différente, par exemple 😛
    oui u r droit. J'ai édité ma réponse

    OriginalL'auteur Hiral

  3. 0

    Vous pouvez utiliser le :nth-child propriété pour obtenir la même chose sans donner de toutes ces différentes classes de votre TDs

    je.e:

    td:nth-child(1), 
td:nth-child(4), 
td:nth-child(5) {
    color:purple;
}
    Je ne pense pas que la n-ième enfant est plus fraîche, plus rapide solution que de classe. Et c'est fragile, afin de td ont le pouvoir de changer mon style gâchera
    Vous avez tout à fait raison. pour ma propre architecture, j'irais avec ce que @Hiral oferred

    OriginalL'auteur silicakes