JavaScript- und CSS-Klassen reagieren nicht wie erwartet

Question

Ich habe eine benutzerdefinierte Navigationsleiste eingerichtet, die, wenn ich durch eine Website scrolle, die aktuelle nav verschiebt, die den Großteil des Bildschirms ein wenig besetzt.

Beispiel Auszüge aus dem CSS und JS sind als

/*CSS*/ 
#topnav { 
    top: 100px; 
    background-color:white; 
    border-top-style:solid; 
} 

.topActive { 
    z-index:5000; 
    width:3cm; 
    background-color:black; 
    border-style:solid; 
    border-right-style:none; 
    color:white; 
} 

/*JS*/ 
if(nav == 0) { 
    $("#topnav").addClass("topActive topnavb"); 
    ... 

In diesem Beispiel folgt, würde ich erwarten, dass, wenn der nav Reiter in der Navigationsleiste heraus gleitet die Hintergrundfarbe der es schwarz ist; In diesem Fall wäre die Hintergrundfarbe jedoch weiß. Im Wesentlichen wird die class nicht die Eigenschaften in der ich würde

Answer 1

Nach dem Lesen auf specificity, über die die anderen Antworten gesprochen haben, habe ich einen Befehl gefunden, der am Ende der Zeile hinzugefügt werden kann. Dies ist !important. Auch wenn !important normalerweise als schlechte Praxis angesehen wird, siehe here für mehr über die Praxis der Verwendung von !important, in diesem Fall wird es nicht als schlechte Praxis angesehen. Dies liegt daran, dass eine Eigenschaft außer Kraft gesetzt wird, die ansonsten bei der weiteren Verwendung von Stylesheets auf dieser Website unverändert bleibt.

Answer 2

Die CSS Spezifität einer Klasse über jede Hilfe bei der Festsetzung dieses Problem id

zwingende schätzen niedriger ist als die eines ID. Dies führt dazu, dass ID-Regeln Klassenregeln überschreiben.

https://css-tricks.com/specifics-on-css-specificity/

Answer 3

Browser die Eigenschaft auswählen, die in der Regel genauer definiert ist. ID-Selektoren sind genauer als Klassenselektoren. Sie müssen nur #topnav.topActive anstelle von .topActive

Answer 4

verwenden. Es ist wegen der CSS specificity. Von dem Link:

Die folgende Liste der Selektor Typen durch Erhöhen Spezifität:

• Typselektoren (z.B. h1) und pseudo-Elemente (beispielsweise: vor).
• Klassenselektoren (z. B. .beispiel), Attributselektoren (z. B. [type = "radio"]) und Pseudoklassen (z. B.: hover).
• ID-Selektoren (z. B. # Beispiel).

So ein ID immer ein class außer Kraft setzen.