Quote Originariamente inviata da bgiordy
Dove sbaglio?
Ciao, dipende dalla "specificità" dei selettori, cioè un particolare algoritmo che determina la priorità di applicazione delle proprietà CSS per risolvere i vari conflitti.

Per una maggiore comprensione del suo funzionamento, puoi dare uno sguardo al capitolo 2 dei "Link utili CSS" (discussione in evidenza), sotto la voce "Specificità, ereditarietà, override".

Nel tuo caso il selettore #cookiePopup button è composto da un "selettore id" e un "selettore elemento" che determinano un valore di specificità pari a 101, mentre il selettore .button:hover è composto da un "selettore classe" e un "selettore pseudo-classe" che determinano un valore di 020.

In questo caso vince la regola col selettore che possiede una specificità maggiore. Il valore 101 è maggiore di 020, per cui la proprietà background-color mantiene il valore indicato inizialmente nella prima regola.

Puoi risolvere chiaramente in vari modi.

A meno che tu non abbia applicato la classe .button per un qualche altro motivo che non sia solo quello di creare l'effetto hover, la cosa più semplice è usare il selettore iniziale come base, quindi aggiungere la pseudo-classe :hover che ne determina sicuramente una specificità maggiore.

codice:
#cookiePopup button:hover {
    background-color: #bb58fe;
}
Questo ha infatti specificità 111 che vince su 101.

Non è questo il caso ma tieni comunque conto che possono esserci anche altri fattori che determinano la priorità di applicazione delle proprietà CSS, ad esempio l'ordine di lettura delle regole, l'uso di stile in linea, l'uso della clausola !important, ecc. Se ti interessa approfondire puoi trovare qualche riferimento sempre tra i link utili.