Comment ajouter nth-child() style inline style?

Comment puis-je ajouter un nth-child(n) déclaration, tout en appliquant des styles en ligne à un élément (ce qui, évidemment, contient plusieurs éléments).

Par exemple, supposons que j'ai un div qui contient trois p éléments.

Le général de la feuille de style de règles comme ça:

div p:nth-child(2) {
  color: blue;
}

Mais comment puis-je encore la couleur du deuxième alinéa, bleu, tandis que l'application d'un style en ligne pour le contenant div?

Vous ajoutez le style en ligne pour des étiquettes de paragraphe. Je ne pense pas que vous pouvez cibler les enfants des sélecteurs avec des styles en ligne
C'est exactement ce que l'OP est de se demander: comment appliquer pseudo classe à l'élément avec javascript. Et la réponse est non, il n'est pas possible.
Ne pas utiliser des styles en ligne.
pas avec js que la question n'est pas identifié avec elle, mais la réponse est encore non, comme vous l'avez mentionné
Je pense que c'est pas encore clair, mais n'est-il pas tout simplement demander si il peut l'utiliser en ligne (dans le document HTML) styles sur le div, et utiliser les CSS nth-child sélecteurs sur la div de l'enfant p éléments à remplacer les styles en ligne? Dans ce cas, la réponse est toujours non (voir Huangism du premier commentaire), mais @dfsq 'commentaire est totalement sans rapport avec la question à portée de main; l'OP n'a pas une seule mention de JS (où avez-vous eu ça?) et déjà montré une application correcte de la pseudo-classes.

OriginalL'auteur Abhimanyu | 2014-09-03

  1. 7

    Style en ligne attribut ne s'applique qu'à l'élément avec l'attribut. Ainsi, par exemple, si vous avez un attribut de style sur un div, les styles ne s'appliquent qu'à div (propriétés héritées et contradictoires styles nonobstant). Vous ne pouvez pas cibler un élément différent à l'aide d'un attribut de style en ligne sur un autre élément.

    Même si vous appliquez un attribut de style sur un p élément, vous ne pouvez pas faire les styles en ligne s'appliquent de façon conditionnelle basée sur une pseudo-classe. Voir ma réponse à cette question pourquoi. Toutefois, si le balisage est généré dynamiquement, vous pouvez contrôler si oui ou non l'attribut style est imprimé en premier lieu à l'aide de la logique est similaire, mais c'est en dehors de la portée de votre question.

    Husain: ce ne sont pas des styles en ligne. C'est un interne de la feuille de style. De deux choses complètement différentes.
    Je suis désolé, je pensais que tu parlais d'attribut d'affichage
    Je pense que @Abhimanyu demande inline valeur de l'attribut d'affichage. Votre interprétation de la question semble bizarre. Parce qu'il est demandé pour l'application de styles en ligne à la div contenant et son code montre l'extrait de code de style en ligne pour enfant de div (p) TylerH interprétation semble tout à fait acceptable
    Husain: Pourquoi gardez-vous de parler à propos de l'affichage de la propriété? Qui a dit rien à ce sujet? Vous semblez être une mauvaise interprétation de la question - ou pire, en regardant le mauvais.
    Husain: Si vous êtes en train de lire "inline" style "display: inline", alors je peux vous assurer que c'est votre interprétation de la question qui est bizarre, parce que je n'ai jamais vu quelqu'un amalgame entre les deux, jamais.

    OriginalL'auteur BoltClock

  2. 4

    En supposant que la raison pour laquelle vous souhaitez appliquer le nth-child(n) déclaration de style en ligne est parce que vous ne pouvez pas modifier le fichier CSS ou ne voulez pas, mais vous avez besoin d'appliquer votre style directement sur la page, vous pouvez essayer d'ajouter un <style> balise à côté de la div en question:

    <style>
  div.myContainer p:nth-child(2) {
    color: blue;
  }
</style>
<div class="myContainer">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

    Je note: ce n'est pas le moyen idéal pour la structure de votre code. Styles et HTML/contenu doivent être séparés pour créer correctement formaté et balisage sémantique.

    Aussi, si vous avez pour appliquer ce style à plus d'un endroit, il peut devenir confus et/ou de contradiction. Cependant, je comprends que, parfois, vous avez à faire des exceptions en fonction du projet.

    C'est pas plus inline style... mais il fait le travail pour le debugging.

    OriginalL'auteur Kevin Vess

  3. -1
    li:nth-child(10n-2) {
    background: red;
}

    C'est la base pour mon code source!

    OriginalL'auteur Subraa PD