Nei CSS qual è la differenza tra "." e "#" quando si dichiara un insieme di stili?

Qual è la differenza tra #e .quando si dichiara un insieme di stili per un elemento e quali sono le semantiche che entrano in gioco quando si decide quale usare?

Sì, sono diversi ...

#è un selettore ID , utilizzato per indirizzare un singolo elemento specifico con un ID univoco, ma. è un selettore di classe utilizzato per targetizzare più elementi con una particolare classe. Per dirla in un altro modo:

• #foo {}disegnerà il singolo elemento dichiarato con un attributoid="foo"
• .foo {}disegnerà tutti gli elementi con un attributo class="foo"(puoi avere più classi assegnate anche a un elemento, semplicemente separandole con spazi, ad es. class="foo bar")

Usi tipici

In generale, usi # per lo styling di qualcosa che sai che apparirà solo una volta, ad esempio cose come div di layout di alto livello come barre laterali, aree banner ecc.

Le classi vengono utilizzate laddove lo stile viene ripetuto, ad esempio se si dirige una forma speciale di intestazione per i messaggi di errore, è possibile creare uno stile h1.error {}che si applicherebbe solo a<h1 class="error">

Specificità

Un altro aspetto in cui i selettori differiscono è nella loro specificità: un selettore ID è considerato più specifico del selettore di classe. Ciò significa che dove gli stili sono in conflitto su un elemento, quelli definiti con il selettore più specifico avranno la precedenza su selettori meno specifici. Ad esempio, date <div id="sidebar" class="box">le regole per #sidebarcon sovrascrivere le regole in conflitto per.box

Ulteriori informazioni sui selettori CSS

Vedi Selectutorial per ulteriori ottimi primer sui selettori CSS: sono incredibilmente potenti e se la tua idea è semplicemente che "# è usato per i DIV" faresti bene a leggere esattamente come usare i CSS in modo più efficace.

EDIT: Sembra che Selectutorial potrebbe essere andato sul grande sito Web nel cielo, quindi prova invece questo link di archivio .

La #significa che esso corrisponda al iddi un elemento. Il .indica il nome della classe:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Si noti che in un documento HTML, l'attributo id deve essere univoco , quindi se si dispone di più di un elemento che richiede uno stile specifico, è necessario utilizzare un nome di classe.

Il punto ( .) indica un nome di classe mentre l'hash ( #) indica un elemento con un attributo id specifico . La classe si applicherà a qualsiasi elemento decorato con quella particolare classe, mentre lo stile # si applicherà solo all'elemento con quel particolare id.

Nome della classe:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Elemento denominato:

<style>
   #name { ... }
</style>

<div id="name"></div>

Vale anche la pena notare che nella cascata , un selettore id ( #) è più specifico del .selettore ab ( ). Pertanto, le regole nell'istruzione id sostituiranno le regole nell'istruzione di classe.

Ad esempio, se entrambe le seguenti affermazioni:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

sono applicati allo stesso elemento HTML:

<h1 id="specials" class="headline">Today's Specials</h1>

il colore: regola blu avrebbe la precedenza sul colore: regola rossa .

Un paio di estensioni rapide su ciò che è già stato detto ...

An iddeve essere unico, ma puoi usare lo stesso ID per rendere più specifici stili diversi.

Ad esempio, dato questo estratto HTML:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

È possibile applicare stili diversi con questi:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Un'altra cosa utile da sapere: puoi avere più classi su un elemento, delimitando lo spazio ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Ciò consente di avere uno stile comune .menucon stili specifici usando .main.menue.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class mira al seguente elemento:

<div class="class"></div>

#class mira al seguente elemento:

<div id="class"></div>

Si noti che l'id DEVE essere univoco in tutto il documento, mentre un numero qualsiasi di elementi può condividere una classe.

Come praticamente tutti hanno già affermato:

Un punto ( .) indica una classe e un hash ( #) indica un ID .

La differenza fondamentale tra è che puoi riutilizzare una classe sulla tua pagina più e più volte, mentre un ID può essere usato una volta. Cioè, ovviamente, se stai rispettando gli standard WC3.

Una pagina verrà comunque visualizzata se si hanno più elementi con lo stesso ID, ma si verificheranno problemi se / quando si tenta di aggiornare dinamicamente detti elementi chiamandoli con il loro ID, poiché non sono univoci.

È anche utile notare che le proprietà ID sostituiranno le proprietà della classe.

# È un selettore ID. Corrisponde solo agli elementi con un ID corrispondente. La prossima regola di stile corrisponderà all'elemento che ha un attributo id con un valore "verde":

#green {color: green}

Vedere http://www.w3schools.com/css/css_syntax.asp per ulteriori informazioni

Ecco il mio approccio alla spiegazione delle regole .stylee #stylefanno parte di una matrice. che se non nel giusto ordine, possono scavalcare l'un l'altro o causare conflitti.

Ecco la line up.

Matrice

#style 0,0,1,0 id

.style 0,1,0,0 class

se vuoi sovrascrivere questi due puoi usare <style></style>witch ha un livello di matrice o la 1,0,0,0. query di E @media sovrascriverà tutto quanto sopra ... Non ne sono sicuro ma penso che il selettore ID #possa essere usato solo una volta in una pagina.