Che cosa significa il selettore CSS “+” (segno più)?

Per esempio:

p + p { /* Some declarations */ } 

Non so cosa significa + . Qual è la differenza tra questo e solo la definizione di uno stile per p senza + p ?

Questo selettore indica che lo stile si applica solo ai paragrafi che seguono direttamente un altro paragrafo.
Un semplice selettore p applicherà lo stile a ogni paragrafo della pagina.

Vedi i selettori adiacenti su W3.org.


Funzionerà solo su IE7 o versioni successive. In IE6, lo stile non verrà applicato a nessun elemento. Questo vale anche per il combinatore, a proposito.

Vedi anche la panoramica di Microsoft per la compatibilità CSS in Internet Explorer .

È il selettore fratello adiacente.

Dal blog di Splash of Style.

Per definire un selettore adiacente CSS, viene utilizzato il segno più.

 h1+p {color:blue;} 

Il suddetto codice CSS formatterà il primo paragrafo dopo (non all’interno) qualsiasi titolo h1 come blu.

h1>p seleziona qualsiasi elemento p che sia un elemento diretto (prima generazione) (all’interno) di un elemento h1 .

  • h1>p corrisponde a

    (

    all’interno

    )

h1+p seleziona il primo elemento p che è un fratello (allo stesso livello del dom) come un elemento h1 .

  • h1+p corrisponde a

    (

    accanto a / dopo

    )

Il segno + significa selezionare un adjacent sibling

Esempio:

CSS

 p + p { font-weight: bold; } 

HTML

Lo stile verrà applicato dal secondo

 


Esempio

Guarda questo Fiddle e lo capirai per sempre: http://jsfiddle.net/7c05m7tv/ (Another Fiddle: http://jsfiddle.net/7c05m7tv/70/ )


Supporto del browser

I selettori dei fratelli adiacenti sono supportati in Internet Explorer 5.x Macintosh. Sono inoltre supportati nella versione di anteprima 1 di Netscape 6 per tutte le innumerevoli piattaforms per cui è disponibile e nella versione di anteprima 3 di Opera 4 per Windows. Ci sono errori nella gestione dei selettori di fratelli adiacenti in IE5 per Windows e Opera 3 per Windows.

Buono a sapersi: Internet Explorer 7 non aggiorna lo stile correttamente quando un elemento viene posizionato dynamicmente prima di un elemento che corrisponde al selettore. In Internet Explorer 8, se un elemento viene inserito dynamicmente facendo clic su un collegamento, lo stile first-child non viene applicato fino a quando il collegamento non viene messo a fuoco.


Per saperne di più

“+” è il selettore fratello adiacente. Selezionerà qualsiasi p DIRETTAMENTE DOPO ap (non un bambino o un genitore, però, un fratello).

+ selettore si chiama Adjacent Sibling Selector .

Ad esempio, il selettore p + p seleziona gli elementi p immediatamente dopo gli elementi p

Può essere pensato come un selezionatore looking outside che controlla l’elemento immediatamente successivo.

Ecco uno snippet di esempio per rendere le cose più chiare:

 body { font-family: Tahoma; font-size: 12px; } p + p { margin-left: 10px; } 
 

Header paragraph

This is a paragraph

This is another paragraph

This is yet another paragraph


Footer paragraph

Corrisponde a qualsiasi elemento p che è immediatamente adiacente a un elemento ‘p’. Vedi: http://www.w3.org/TR/CSS2/selector.html

Seleziona il paragrafo successivo e fa rientrare l’inizio del paragrafo da sinistra proprio come potresti in Microsoft Word.

+ presenta uno dei relativi selettori. Elenco di tutti i relativi selettori:

div p – Tutti gli elementi

all’interno degli elementi

sono selezionati.

div > p – Tutti gli elementi

cui genitore diretto è

sono selezionati. Funziona anche all’indietro ( p < div )

div + p - Tutti gli elementi

si posizionano immediatamente dopo l'elemento

selezionato.

div ~ p - Tutti gli elementi

preceduti da un elemento

sono selezionati.

Maggiori informazioni sui selettori controlla qui .

Il Plus (+) selezionerà il primo elemento immediato. Quando usi il selettore + devi dare due parametri. Questo sarà più chiaro con l’esempio: qui div e span sono parametri, quindi in questo caso solo la prima span dopo il div sarà in stile.

  div+ span{ color: green; padding :100px; } 
The top or first element
this is span immediately after div, this will be selected This will not be selected

Lo stile sopra si applica solo alla prima apertura dopo il div. È importante notare che la seconda span non sarà selezionata.

 p+p{ //styling the code } p+p{ } simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body. 

This is first paragraph

This is second paragraph

This is third paragraph

Styling part It will style all sibling paragraph with red color.

l’output finale è simile a questo

inserisci la descrizione dell'immagine qui

Significa che corrisponde a ogni elemento p che è immediatamente adiacente

http://www.snoopcode.com/css/examples/css-adjacent-sibling-selector