Gewusst wie: hinzufügen nth-child () - Stil in inline-styling?

Wie kann ich ein nth-child(n) Erklärung während der Anwendung von inline-styles auf ein element (die, natürlich, enthält mehrere Elemente).

Angenommen, ich habe eine div enthält drei p Elemente.

Den Allgemeinen stylesheet-Regeln gehen so:

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

Aber wie kann ich noch die Farbe des zweiten Absatzes blau, während die Anwendung einer inline-Stil, das mit div?

  • Ich glaube nicht, dass das, was diese Frage fragt.
  • Fügen Sie die inline-Formatvorlagen Absatz-tags. Ich glaube nicht, dass man target-Kind-Selektoren mit inline-styles
  • Das ist genau das, was OP ist zu Fragen: wie anwenden pseudo-Klasse-element mit javascript. Und die Antwort ist Nein, es ist nicht möglich.
  • Nicht verwenden Sie inline-Stile.
  • nicht mit js die Frage ist nicht markiert, aber die Antwort ist noch keine da, die Sie erwähnt haben
  • Oh, so ich kann nicht. Wollte nur wissen, dass. Würde jemand diesen post als Antwort?
  • Ich denke, es ist noch unklar, doch ist er nicht nur fragt, ob er mit der in-line (in das HTML-Dokument) Stile auf die div und CSS nth-child Selektoren auf die div ' s child p Elemente zu überschreiben, die inline-styles? In dem Fall, die Antwort ist immer noch Nein (siehe Huangism ersten Kommentar), aber @dfsq 's Kommentar ist völlig unabhängig von der Frage bei der hand; OP habe nicht eine einzige Erwähnung von JS (wo hast du das her?) und schon zeigte, eine korrekte Anwendung des pseudo-Klassen.
  • Sie können post eine Antwort von dir oder löschen Sie einfach die Frage

InformationsquelleAutor Abhimanyu | 2014-09-03
  1. 8

    Einem inline-style-Attribut bezieht sich nur auf das element mit dem Attribut. So zum Beispiel, wenn Sie ein style-Attribut auf eine div, die Stile gelten nur für die, die div (vererbten Eigenschaften und widersprüchliche Stile abweichend). Sie kann nicht Ziel ein anderes element mit einem inline-style-Attribut, das auf ein anderes element.

    Selbst wenn Sie eine style-Attribut auf eine p element, das können Sie nicht machen, die inline-styles gelten bedingt basierend auf einer pseudo-Klasse. Siehe meine Antwort auf diese Frage, warum. Allerdings, wenn der markup-Code wird dynamisch generiert, können Sie Steuern, ob oder nicht das style-Attribut wird erst gedruckt mit ähnlicher Logik, aber das ist außerhalb des Bereichs Ihrer Frage.

    • Husain: das sind keine inline-styles. Das ist ein internes stylesheet. Zwei völlig verschiedene Dinge.
    • Ich bin sorry, ich dachte, Sie redeten über das display-Attribut
    • Ich denke, @Abhimanyu ist gefragt für inline Wert display-Attribut. Ihre interpretation der Frage scheint seltsam. Denn er bittet für die Anwendung von inline-Stilen mit div und sein code-snippet zeigt inline-style für ein Kind von div (p) TylerH interpretation scheint akzeptabel
    • Husain: Warum tun Sie reden immer über die display-Eigenschaft? Wer sagte etwas über es? Sie scheinen der eine Fehlinterpretation des Frage - oder, noch schlimmer, auf der Suche an den falschen.
    • Husain: Wenn Sie Lesen "inline Stil", wie "display: inline", dann kann ich Ihnen versichern, dass es Ihre interpretation der Frage ist seltsam, denn ich habe noch nie jemanden gesehen, verschmelzen die beiden, immer.
    • Ich kann Total falsch interpretiert die Frage. Tut mir Leid. Aber was ist der Fragesteller bittet? Ist es nicht dieses ? link hat Er nicht angeben, inline-pseudo-Stile, hat er das? er sagte, inline-Stil nur für die mit div.

    InformationsquelleAutor BoltClock
  2. 5

    Vorausgesetzt, der Grund, den Sie anwenden möchten nth-child(n) Deklaration als inline-Stil ist, weil Sie nicht Bearbeiten können Sie die CSS-Datei oder wollen Sie nicht; sondern Sie müssen, um Ihr styling direkt auf der Seite, die Sie könnten versuchen, nur das hinzufügen einer <style> tag neben das div in Frage:

    <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>

    Ich soll Hinweis: dies ist nicht der ideale Weg, um Ihren code strukturieren. Styles und HTML/content getrennt werden soll, zu erstellen, die korrekt formatiert und semantisches markup.

    Auch, wenn Sie dieses styling in mehr als einem Ort, kann es chaotisch und/oder inkonsistent ist. Ich verstehe allerdings, dass manchmal muss man Ausnahmen machen, je nach Projekt.

    • Es ist nicht mehr inline-styling... aber es macht den job für debugging-Zwecke.
    InformationsquelleAutor Kevin Vess
  3. -1
    li:nth-child(10n-2) {
    background: red;
}

    Dies ist die Basis für mein source-code!

    InformationsquelleAutor Subraa PD
Schreibe einen Kommentar