Posso targetizzare a: prima o: dopo lo pseudo-elemento con un combinatore di pari livello?

Question

C'è un motivo per cui questo CSS non funziona?

http://jsfiddle.net/6v5BZ/

a[href^="http"]:after { 
    content:""; 
    width:10px; 
    height:10px; 
    display:inline-block; 
    background-color:red; 
} 

a[href^="http"] img ~ :after { 
    display:none; 
} 

.. su questo HTML?

<a href="http://google.com">Test</a> 
<a href="http://google.com"> 
    <img src="https://www.google.com/logos/classicplus.png"> 
</a> 

L'idea è di avere un pseudo-elemento sulla corrispondenza tag di ancoraggio. Ma non voglio che si applichi ai tag di ancoraggio che avvolgono un'immagine. E dal momento che non posso bersagliare le ancore usando qualcosa come a < img, ho pensato che potrei scegliere come target: dopo lo pseudo-elemento trovando un'immagine di cui è un fratello.

Qualsiasi intuizione sarebbe molto apprezzata.

Answer 1

Non puoi scegliere come target: dopo che il contenuto non è stato renderizzato nel DOM e non lo manipola, perché questo funzioni, il DOM dovrebbe essere ri-reso e il CSS non può manipolarlo in questo modo.

Controllare le specifiche per la comprensione dettagliata: http://www.w3.org/TR/CSS2/generate.html#propdef-content

contenuto generato non altera il documento. In particolare, lo standard non viene reindirizzato all'elaboratore del linguaggio del documento (ad esempio, per il reparsing ).

Suggerisco di utilizzare JavaScript per fare il lavoro per voi.

Answer 2

Non è possibile utilizzare un combinatore per scegliere come target uno pseudoelemento relativo a elementi diversi dal suo elemento generatore.

Questo perché sono pseudo-elementi, non elementi effettivi, ei combinatori funzionano solo stabilendo relazioni tra elementi reali. Un pseudo-elemento, d'altra parte, può essere applicato solo al soggetto di un selettore (il selettore composto più a destra), e questo accade solo dopo che la corrispondenza è stata elaborata sugli elementi reali. In altre parole, la corrispondenza viene eseguita prima come se lo pseudo-elemento non fosse presente, quindi lo pseudo-elemento, se è indicato all'interno del selettore, viene applicato a ciascuna corrispondenza.

Nel codice, il seguente selettore:

a[href^="http"] img ~ :after 

in realtà non cercare un pseudo-elemento :after che viene dopo un img all'interno della a, anche se sembra in questo modo in quanto entrambi sono resi da bambini dell'elemento a.

Esso può essere riscritta nel seguente:

a[href^="http"] img ~ *:after 

Avviso selettore *, che è implicita. Analogamente al modo in cui è possibile omettere lo * prima di qualsiasi altro semplice selettore per essere implicito, omettere lo * da uno pseudo-elemento significa anche implicitamente essere lì. Vedi lo spec per i dettagli.

Ora, anche se appare *:after dovrebbe comunque corrispondere a:after (dal a sarebbe partita *), che ancora non funziona in questo modo. Se si rimuove il pseudo-elemento :after dal selettore:

a[href^="http"] img ~ * 

Si noterà che il significato dei cambiamenti selettore interamente:

Selezionare qualsiasi elemento
che appare come un seguito di pari livello di un img
ovvero un discendente di un a (il cui href inizia con "http").

Dal momento che l'img è l'ultimo figlio dell'elemento a nel codice HTML, non ci sono seguenti fratelli a partita, e quindi non :after pseudo-elementi possono essere generati.

Nel caso di una pseudo-elemento :before o :after, si potrebbe pensare di abbinamento di pseudo-elemento elemento generatore relativo a "fratelli" di pseudo-elemento, ma come l'OP ha giustamente osservato, there is no parent selector, in modo che Sono anche fuori di sorte.