differenza tra pseudo-classi vuote e vuote

Question

qual è la differenza tra: vuoto e vuoto (CSS Selectors Livello 4 bozza)? Oltre al fatto che lo spazio vuoto funziona solo in Firefox fino ad ora.

div div{ 
 
    
 
    width:100px; 
 
    height:100px; 
 
    display:inline-block; 
 
    margin:5px; 
 
    } 
 
div.emptyCell:empty{ 
 
    
 
    background:#009688; 
 
    
 
    } 
 
div.blankCell:blank{ 
 
    
 
    background:#3F51B5; 
 
    
 
    }

<div><div class="emptyCell"><!-- nothing but a comment--></div> 
 
<div class="emptyCell"></div> 
 
<div class="emptyCell"><!-- nothing but a comment--></div> 
 
<div class="emptyCell"></div> 
 
    </div> 
 
<div> 
 
<div class="blankCell"></div> 
 
<div class="blankCell"><!-- nothing but a comment--></div> 
 
<div class="blankCell"></div> 
 
<div class="blankCell"><!-- nothing but a comment--></div> 
 
    </div>

Answer 1

L': blank pseudo-classe rifà a: pseudo-classe vuota. Come : vuoto,: vuoto selezionerà elementi che non contengono nulla o contengono solo un commento HTML. Ma,: vuoto selezionerà anche gli elementi che includono spazi bianchi, che: vuoto non sarà.

css-tricks :blank

Inoltre, From the W3c Working Draft on selectors level 4:

L': blank pseudo-classe è identica alla: vuoto pseudo-classe, tranne che esclude inoltre characters affected by whitespace processing [CSS3TEXT] per determinare se un elemento è vuoto

Esempio:

Ad esempio, il seguente elemento corrisponde: vuoto, ma non: vuoto, perché contiene almeno un'interruzione di riga, ed eventualmente altri spazio bianco:

<p> 
</p> 

Answer 2

:empty corrisponderà a tutti gli elementi dati perché un nodo elemento che non contiene nient'altro che i nodi di commento è essenzialmente il sa io come nodo di elementi senza figli per quanto riguarda i CSS. Questo è il motivo per cui non vedi una differenza tra le partite.

La differenza è che :blank corrisponde a elementi costituiti esclusivamente da caratteri di spaziatura, che altrimenti non sono considerati :empty. Questo perché i nodi degli spazi bianchi sono in realtà solo nodi di testo che contengono solo spazi bianchi, e un elemento con un nodo di testo figlio non è un elemento vuoto.

importante notare tuttavia è che la CSSWG sta considerando di cambiare :empty in modo che corrisponda elementi che contengono solo spazi bianchi e, ovviando alla necessità di un :blank pseudo-classe separata, e confusamente chiamato,. Questo è stato risolto just a few weeks ago. Pertanto, :blank come descritto nell'attuale WD può o non può continuare a esistere nel prossimo WD, che pianificano di pubblicare a breve vedendo l'ultimo aggiornamento di WD più di due anni fa.

Se ciò dovesse accadere, la risposta a questa domanda sarà:

:blank era una proposta originale per livello di selettori 4 per gli elementi che o non hanno alcun contenuto o solo contengono spazi bianchi corrispondenti. Da allora è stato rimosso e la sua funzionalità è stata inclusa nel livello 4 :empty, evitando la necessità di una pseudo-classe separata e con un nome confuso.