-1
Ich fragte ein wenig falsch, aber immer noch hilfreich, Frage here. Einen neuen Beitrag veröffentlichen, um ihn sauber zu halten.Spezifität und Vererbung in CSS
In der unten, könnten Sie mir helfen zu verstehen, warum .one li gewinnt über .one .two, so dass Item One blau statt pink? Gemäß den Regeln der Spezifität (link) haben zwei verschachtelte Klassen einen Spezifikationswert von 20, während eine Klasse und ein Element einen Wert von 11 haben. .one .two sollte demnach gewinnen.
<!DOCTYPE html>
<html>
<head>
<style>
.one {
color: red;
}
.one li {
color: blue;
}
.one .two {
color: pink;
}
.one .two .three {
color: purple;
}
.two {
color: green;
}
.one.two {
color: yellow;
}
.two.three {
color: grey;
}
</style>
</head>
<body>
<div class="one">
<ul class="two">
<li>Item One</li>
</ul>
</div>
<div class="three two one">
<p>TEST</p>
</div>
</body>
</html>
Der gleiche Fall wie in der anderen Frage. '.one li' ist für das' li' (direkt darauf), während '.one ™zwei die Farbe dem Elternteil' ul' zuordnet. Vererbung geschieht nur dann, wenn dem 'li' selbst keine Farbe zugewiesen wurde. Spezifitätsberechnungen gelten nur dann, wenn zwei oder mehr Selektoren auf dasselbe Element zielen. Hier zielen sie nicht auf das gleiche Element und daher spielt die Spezifität keine Rolle. – Harry
Die akzeptierte Antwort auf Ihre vorherige Frage erklärt warum sehr deutlich. Vielleicht sollten Sie um eine Klarstellung zu den Punkten bitten, die Sie bei dieser Antwort nicht verstanden haben? – Quentin
@Quentin Der vorherige Thread diskutiert nicht die Vererbung, die diese spezielle Frage adressiert. – Anders