Hallo
Beim folgenden Beispiel von W3Schools verstehe ich ein paar Dinge nicht, vielleicht könnt ihr mich dabei unterstützen.
Es geht um folgendes Beispiel: https://www.w3schools.com/css/…name=tryresponsive_styles
Dazu habe ich zwei Fragen:
1. Wieso funktioniert die Vererbung einiger Eigenschaften der Eltern-Elemente zu den Child-Elementen und einige nicht:
Diese Eigenschaften werden vom h1 Element übernommen (color: white etc.). Füge ich aber beispielsweise eine border-Eigenschaft hinzu, wie die folgende, dann wird diese vom h1 Element nicht übernommen.
Code
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
border: 1px solid black; /* DIESE EIGENSCHAFT WIRD VOM H1 ELEMENT NICHT ÜBERNOMMEN */
}
[...]
<div class="header">
<h1>Chania</h1> /* WEISS ABER KEIN RAHMEN */
</div>
2. Wieso funktioniert die folgende Änderung nicht, dabei meine ich korrekt zu selektieren.
Code
/* ORIGINAL VERSION IN DER W3School ÜBUNG */
.menu ul {
[...]
}
.menu li {
[...]
}
[...]
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
Alles anzeigen
Code
/* MEINE GEÄNDERTE VERSION */
.menu ul { /* Dieser hat keinen Effekt mehr so. Entfernt man jedoch '.menu' dann funktioniert das wieder. */
[...]
}
.menu li {
[...]
}
<div class="col-3"> /* Die class 'menu' hier entfernt */
<ul class="menu">
<li class="menu">The Flight</li>
<li class="menu">The City</li>
<li class="menu">The Island</li>
<li class="menu">The Food</li>
</ul>
</div>
Alles anzeigen
Ich hoffe ihr könnt mir bei diesen Verständnisfragen helfen.
Danke im Voraus.
Gruss,
Arber