Sortierung nach CSS-Spezifität
Mein Hauptziel ist es, einen CSS-Stilblock anhand seiner Spezifität neu anzuordnen. Ich hatte vorher von geholfenSO und ich habe es geschafft, diese Funktion zu produzieren.Siehe das Wesentliche.
Hier ist ein Beispiel:
function specificity($selector){
// https://gist.github.com/2774085
}
$compare = function($a, $b) use ($specificity) {
return $specificity($a) - $specificity($b)
};
$array = css_array();
uksort($array, $compare);
Das oben Genannte hat funktioniert, bis ich auf dieses CSS gestoßen bin:
html, body, body div{
background: transparent;
}
body {
background-color: #D96F02;
}
Dies wird folgendermaßen neu angeordnet:
body { // 1 point
background-color: #D96F02;
}
html, body, body div{ // 4 points
background: transparent;
}
Auf diese Weise wendet der Browser das CSS jedoch nicht an.
Ich denke, dass meiner Spezifitätsfunktion die Bedeutung der Reihenfolge von CSS fehlt, anstatt basierend auf der Selektor-Spezifität zu ordnen. Ist das wahr?
AktualisierenIch denke, was ich tun sollte, ist in meiner Vergleichsfunktion, ich sollte immer einen zusätzlichen Punkt hinzufügen10
weil die Spezifität nicht nur auf Selektoren basiert, sondern auch auf der Reihenfolge der Selektoren. So etwas in der Art:
$compare = function($a, $b) use ($specificity) {
return ($specificity($a) + 10) - $specificity($b)
};
Wie sieht das aus und wie bestimme ich die Anzahl der Punkte, die ich in diesem Fall geben soll?