CSS/HTML: ul: Selettore vuoto non corrisponderà un elenco vuoto

Question

Ho il seguente codice CSS e HTML:

<ul id="actions" class="frame frame-yellowglow"> 
</ul> 

CSS

ul#actions { 
    clear: left;  
    width: calc(60% - 2px); 
    margin: 5px auto; 
    padding: 10px 0px; 
    text-align: center; 
} 
ul#actions:empty { 
    margin: 0; 
    padding: 0; 
} 
ul#actions li { 
    display: inline; 
    margin: 0px 3px; 
} 
.frame { 
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 
    border: 1px #dddddd solid; 
} 
.frame:empty { 
    border: none; 
    box-shadow: none; 
} 
.frame-yellowglow { 
    border: 1px #D4B700 solid; 
    box-shadow: 0 0 4px #D4B700; 
} 

Il ul è popolato con le icone per alcuni azioni che possono essere eseguite. Tuttavia, lo ul non corrisponde al: selettore vuoto quando vuoto e come tale esegue ancora il rendering; confine, imbottitura, ombra e tutto.

[EDIT: Per chiarire, sto parlando di quando gli elementi non sono stati ancora aggiunti. Anche quando non c'è nulla dentro, non corrisponde ancora al: selettore vuoto. ]

Perché è così?

Answer 1

Secondo MDN

L': vuoto pseudo-classe rappresenta qualsiasi elemento che non ha figli affatto. Vengono considerati solo i nodi e il testo degli elementi (inclusi gli spazi bianchi).

Il proprio "vuoto" ul contiene probabilmente un nodo di testo di spazi bianchi.