CSS -: bersaglio ~

Question

thats il mio codice html:

<a href="#anchor">test</a> 
<ul id="anchor"></ul> 

Ora voglio per lo stile il mio obiettivo, che purtroppo non si un problema.

#anchor:target 
{ 
} 

Ma voglio selezionare il fratello del target (a).

#anchor:target ~ a{ 
    background: blue; 
} 

Non funziona. Come selezionare il fratello del bersaglio?

Answer 1

Attualmente, non esiste un modo per assegnare stili ai fratelli precedenti con CSS. Per ottenere questo, dovrai usare javascript.

si può ottenere il successivo fratello con + o tutti <a> s dopo la vostra <ul> con ~:

#anchor:target + a { 
    /* 

    <ul></ul> 
    <a>will get this one</a> 
    <a>but not this one</a> 

    */ 
} 

#anchor:target ~ a { 
    /* 

    <ul></ul> 
    <a>will get this one</a> 
    <a>and this one too!</a> 

    */ 
} 

Answer 2

In CSS non esiste alcun selettore "precedente" (in CSS2 o CSS3).

La bozza "Selettori di livello 4" introduce lo ! Selettore, che se ho capito bene, consente la selezione precedente di pari livello.
https://drafts.csswg.org/selectors-4/#subject

Tuttavia, questo è ancora in forma di bozza e non è supportato in tutti i principali browser.

Siamo spiacenti, ma non è possibile con le specifiche CSS attuali.
L'unico modo per ottenere questo risultato sarebbe utilizzare JavaScript o modificare l'ordine del markup.

Answer 3

Attualmente, non è possibile ottenere i fratelli precedenti. Ma è possibile selezionare un elemento con attributo specifico come questo:

a[href="#anchor"] { 
 
\t color: #f00; 
 
}

<a href="#anchor">test</a> 
 
<ul id="anchor"></ul>

Answer 4

come per la mia risposta precedente, questo non è possibile, in modo che hai scritto a causa di limitazioni nei CSS.

Tuttavia, è possibile sempre corrispondere a se stesso?

a[target|="#"] { 
} 

Ciò selezionare tutti <a> tag all'interno del documento che puntano a ancore locali.