2013-06-09 11 views
10

Ich habe die folgende CSS und HTML-Code:CSS/HTML: ul: leer Wähler nicht eine leere Liste übereinstimmen

<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; 
} 

Die ul mit Symbolen für bestimmte bevölkert Aktionen, die ausgeführt werden können. Die ul stimmt jedoch nicht mit dem leeren Auswahlfeld überein, wenn sie leer ist und wird daher weiterhin gerendert. Grenze, Polsterung, Schatten und alles.

[Bearbeiten: Um zu verdeutlichen, ich spreche hier darüber, wenn Elemente noch nicht hinzugefügt wurden. Auch wenn nichts drin ist, stimmt es immer noch nicht mit dem: leeren Selektor überein. ]

Warum ist das so?

+0

In welcher Weise ist es belegt? Wenn das DOM-Objekt untergeordnete Elemente aufweist, wird es nicht als leer gezählt. Ob diese Elemente aufgrund von Markup oder Javascript vorhanden sind, spielt keine Rolle. – lonesomeday

+0

Wenn du "leer" sagst, meinst du es ist nur '

    '? In welchem ​​Browser arbeiten Sie auch (': empty' wird möglicherweise nicht unterstützt)? – ASGM

    +0

    @lonesomeday via PHP, wenn die Seite generiert wird und kann über Javascript geändert werden. – Jake

    Antwort

    18

    Nach MDN

    Die: leere Pseudo-Klasse steht für ein beliebiges Element, das überhaupt keine Kinder hat. Es werden nur Elementknoten und Text (einschließlich Leerzeichen) berücksichtigt.

    Ihr "leerer" ul enthält wahrscheinlich einen Leerzeichen-Textknoten.

    +0

    Warten ... würde ein \ n oder \ t es nicht leer machen? – Jake

    +0

    Es gibt keine Knoten, aber immer noch einen Zeilenumbruch und ein paar Tab-Zeichen. – Jake

    +0

    Eigentlich, ja, ich nahm das \ n \ t und das hat es zusammenpassen. Was sehr unangenehm ist, da es die HTML-Quelle hässlich aussehen lässt, aber trotzdem funktioniert es. Danke – Jake

    Verwandte Themen