Was ist "Eltern", die in HTML oder CSS?

Ich eingeführt wurde, um den folgenden code:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}
</style>
</head>
<body>

<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>

<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>

</body>
</html>

Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit

Ich bin mir nicht sicher, warum die Farbe der extra-span ist grün. Wenn Sie verwenden die 'inherit' - Wert, nehmen Sie eine Farbe ähnlich wie die erste eingeführt? Ist es das, was es ist?

Was ist das 'parent' und 'child' uns hier beziehen? Was ist Ihre definition?

  • Das Parent-element in diesem Fall ist der div, der die Spanne ist im inneren auf.
  • <div id="somediv"><p>Hallo Welt</p> <div class="content"> <a hrf="#">somelink</a></div></div>
  • In meinem Kommentar oben somediv ist die Eltern-und alles innerhalb dieses div ist ein Kind, wenn ich geben Sie Stil, um Eltern und Kinder, ich sage Erben dauert es, den Stil des übergeordneten div
  • Ja, div-Klasse extra hat inline-css-Stil, setzt sich seine Farbe zu grün. Die .extra span { color:inherit; } bedeutet, dass das div Erben sollte die Farbe von diesem Elternteil. dorward.mich.uk/www/css/Vererbung
InformationsquelleAutor UnorthodoxThing | 2017-03-16
  1. 3

    Da die <span></span> Elemente verschachtelt sind, innerhalb Ihrer "Eltern" <div></div> Elemente, sind Sie sagte, um sein "Kind" der "Eltern" - div.

    <div id="parent">
  <span id="child1"></span>
  <span id="child2"></span>
  <span id="child3"></span>
</div>

    Den 3 Spannweiten sind Kinder von der parent-div, und die Geschwister von einander. Viel wie eine Familie. Wenn ein Kind erbt styles von seinen Eltern, es nutzt den gleichen Stil wie seine Eltern verwendet für diesen besonderen Stil.

    color: inherit;

    bedeutet, dass bei der Vergabe der span seine Farbe, wird es zu verschieben, was die übergeordnete Farbe, die in diesem Fall grün war.

    • Nicht klar. Ich weiß nicht, aus Ihrer Antwort, wenn div#parent wird immer noch ein Elternteil, wenn es ein anderes div innen <div id="parent"><div><span><span></div></div>
    • der Begriff parent wird verwendet, um beziehen sich auf das direkt übergeordnete Element eines bestimmten Elements. In deinem Beispiel, die div#parent ist nicht der Elternteil des span, denn die ungetaggten div nimmt diese Rolle. Aber Stil Vererbung ist noch trickle-down-Theorie in dieser Weise, und so der span wird noch die Farbe von div#parent in deinem Beispiel, es sei denn die ungetaggten div oder Kind span wird definiert, um eine andere Farbe, oder, sprechen mehr gefasst, es sei denn, die Natur, das element ist von Natur aus anders. (Ein div definiert in einem inline-Eltern nehmen block-styling-durch Natur)
    InformationsquelleAutor Bango
  2. 5

    Wenn wir einen <p> innerhalb einer <div> element, das <div> ist die Muttergesellschaft der <p> und die <p> ist das Kind der <div>

    <div>
  <p></p>
</div>

    Lesen Sie diese Website: https://www.w3schools.com/js/js_htmldom_navigation.asp es erklärt perfekt.

    Den Knoten im node-Baum eine hierarchische Beziehung zueinander.

    Die Begriffe Eltern, Kind und Geschwister werden zum beschreiben der Beziehungen.

    • In einem Knoten, der Baum, der oberste Knoten heißt die Wurzel (oder Wurzel-Knoten)
    • Jeder Knoten hat genau einen parent, außer der Wurzel (die hat keine
      Elternteil)
    • Ein Knoten kann mehrere Kinder
    • Geschwister (Brüder oder Schwestern) sind Knoten mit demselben übergeordneten

    Was ist

    CSS verwendet diese Struktur, um spezifische Selektoren wie first-child, :nth-child(n), :last-child...

    Können Sie sehen, alle CSS-Selektoren hier

    Den Wert inherit einem CSS-Attribut, angewendet auf eine HTML-Knoten, nimmt einfach den übergeordneten Wert des Attributs.

    Also wenn ich eine html wie diese:

    <div>
   <p></p>
   <p class="red"></p>
</div>

    Und css wie:

    div {
   background-color: red;
}

div > p {
  background-color: blue;
}

.red {
  background-color: inherit;
}

    Den div mit der roten Klasse, mit inherit wird der Wert rot der Eltern.

    InformationsquelleAutor albert
  3. 2

    Erben Inhaltsangabe: von https://developer.mozilla.org/en/docs/Web/CSS/inherit

    Den Erben CSS-Wert bewirkt, dass das element, für das es angegeben wurde
    nehmen Sie den berechneten Wert der Eigenschaft vom übergeordneten element. Es ist
    erlaubt auf jeder CSS-Eigenschaft.

    Bremse nach unten Ihren code, um einzelne Teile zu verstehen, was Los wie:

    span {
    color: blue;
    border: 1px solid black;
}

    Das bedeutet, jeder span hat eine Blaue Farbe.

    Bewegen Sie sich auf die nächsten Zeilen:

    .extra span {
    color: inherit;
}

    Das bedeutet, jeder messspanne innerhalb eines Elements mit einem class="extra" Erben die Farbe. Bedeutet, dass alle <span>s im .extra es dauern wird, ist die Muttergesellschaft der Farbe.

    Nun, wie Sie sehen in Ihrem Ergebnis jeder span hat Blaue Farbe, außer das man innerhalb des div mit der Klasse extra hat einen inline-Stil auf die Farbe, die sagen, es ist grün.

    InformationsquelleAutor caramba
Schreibe einen Kommentar