Che cosa fa un [href^= "..."] in CSS?

Question

Ho usato CSS prima e mi sono imbattuto nel sotto stile CSS, non ho idea di cosa faccia.

a[href^="http:"] { 
    background: url(img/keys.gif) no-repeat right top; 
} 
a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] { 
    background-image: none; padding-right:0; 
} 

Answer 1

a[href^="http:"] 

seleziona un elemento il cui <a>href valore dell'attributo inizia con http:.

Ad esempio:

p[title^="para"] {background: green;} 

corrisponderà il seguente:

<p title="paragraph"> This paragraph should have a green background. </p> 

Answer 2

Queste sono attribute-starts-with selectors, faranno selezionano <a> elementi con un attributo href iniziano con quel valore, ad esempio a[href^="http:"] partite eventuali tasselli con uno href iniziando con href="http:....", per esempio:

<a href="http://www.google.com">Test</a> <!-- would match --> 
<a href="#element">Test</a>    <!-- wouldn't match --> 

Answer 3

Per ogni collegamento che è il parametro "href" inizia con "http:", impostare lo sfondo ad un'immagine chiave (senza ripetizione, posizionata nel angolo in alto a destra).

Per ogni collegamento il cui parametro "href" inizia con "http://mysite.com" o "http://www.mysite.com", imposta l'immagine di sfondo su nulla (e il margine destro su 0).

Per me, questo sembra un trucco CSS intelligente che renderà i tuoi utenti consapevoli di quando stanno lasciando il tuo sito web attraverso un collegamento esterno visualizzando un'immagine chiave.

(credo lo userò in futuro. :)

Answer 4

Le regole dicono, secondo the W3C docs:

• Tutte le ancore che hanno un attributo href che inizia con http:
• Tutti ancore che hanno un attributo href che iniziano con http://mysite.com o http://www.mysite.com

Answer 5

È un selettore di attributo.
La parte ^= significa che l'attributo href dei tag di ancoraggio deve iniziare con http: nel primo esempio.

Answer 6

Questo è uno degli substring-matching attribute selectors disponibile in CSS3. Corrisponde ai collegamenti con gli attributi href i cui valori iniziano con la stringa specificata.

Per illustrare, prenderemo il vostro esempio CSS, e aggiungere alcuni valori di default:

a { 
    background: none; padding: 0 1em; 
} 

a[href^="http:"] { 
    background: url(img/keys.gif) no-repeat right top; 
} 

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] { 
    background-image: none; padding-right:0; 
} 

E lo stile il seguente codice HTML con esso. Gli stili di output sono riepilogati nei commenti:

<ul> 
    <!-- [1] No background, 1em left and right padding --> 
    <li><a href="/index.php">My site's page</a></li> 

    <!-- [2] Background, 1em left and right padding --> 
    <li><a href="http://example.com">External link</a></li> 

    <!-- [3] No background, no right padding --> 
    <li><a href="http://mysite.com">My site's base URL without www</a></li>   

    <!-- [4] No background, no right padding --> 
    <li><a href="http://www.mysite.com">My site's base URL with www</a></li> 

    <!-- [5] No background, no right padding --> 
    <li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li> 
</ul> 

Cosa sta succedendo?

1. Selezionato da a solo
   attributo di questo elemento href="/index.php" non inizia con http: o gli altri valori.

   Non c'è sfondo, ma c'è il riempimento sinistro e destro.

2. Selezionato da a[href^="http:"] solo
   attributo di questo elemento href="http://example.com" inizia con http: ma non inizia con http://mysite.com.

   C'è un padding sinistro e uno destro e un'immagine di sfondo.

3. Selezionato da attributo a[href^="http:"] e a[href^="http://mysite.com"]
   di questo elemento href="http://mysite.com" inizia con http: ed ulteriori inizia con http://mysite.com.

   Poiché il secondo selettore prevale sul primo selettore, l'immagine di sfondo e il riempimento destro vengono rimossi.

4. selezionati da a[href^="http:"] e a[href^="http://www.mysite.com"]
   attributo di questo elemento href="http://www.mysite.com" inizia con http: ed ulteriori inizia con http://www.mysite.com (notare il www).

   Poiché il secondo selettore prevale sul primo selettore, l'immagine di sfondo e il riempimento destro vengono rimossi.

5. Selezionato da attributo a[href^="http:"] e a[href^="http://mysite.com"]
   di questo elemento inizia con http: ed ulteriori inizia con http://mysite.com.

   Si noti che, rispetto al terzo collegamento, l'attributo in questo contiene più di un semplice URL di base; tuttavia, lo ^= indica che il valore dell'attributo deve solo iniziare con URL di base del tuo sito, anziché = che significherebbe "selezionare i collegamenti che puntano solo a http://mysite.com". Pertanto, questo link è abbinato al secondo selettore.

   Poiché il secondo selettore prevale sul primo selettore, l'immagine di sfondo e il riempimento destro vengono rimossi.