Nei CSS qual è la differenza tra “.” E “#” quando si dichiara un insieme di stili?

Question

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?

Answer 1

Sì, sono diversi ...

# è un selettore ID , usato per scegliere come target un elemento singolo con un ID univoco, tuttavia. è un selettore di classe utilizzato come target per più elementi con una classe particolare. Per dirla in altro modo:

• #foo {} modellerà l'elemento singolo dichiarato con un attributo id="foo"
• .foo {} assegnerà uno stile a tutti con un attributo class = " foo " (puoi assegnare più classi a un anche elemento, basta separarli 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 dove viene ripetuto lo stile, ad es. supponi di avere una forma speciale di intestazione per i messaggi di errore, potresti 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 contrastano su un elemento, quelli definiti con il più specifico il selettore sovrascriverà selettori meno specifici. Ad esempio, dato < div id = " sidebar " class = " box " > qualsiasi regola per #sidebar con sovrascrivi regole contrastanti per .box

Ulteriori informazioni sui selettori CSS

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

EDIT: sembra che Selectutorial sia andato sul grande sito Web nel cielo, quindi prova questo link all'archivio invece.

Answer 2

Il # significa che corrisponde al id di 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;
}

Nota che in un documento HTML, l'attributo id deve essere univoco , quindi se hai più di un elemento che richiede uno stile specifico, dovresti usare un nome di classe.

Answer 3

Il punto (. ) indica un classe mentre l'hash ( # ) indica un elemento con un id attributo. 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 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>

Answer 4

Vale anche la pena notare che nella cascata , un id ( # ) il selettore è più selettore specifico di 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;
}

vengono applicati allo stesso elemento HTML:

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

la regola color: blue avrebbe la precedenza sulla regola color: red .

Answer 5

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

Un id deve essere univoco, ma è possibile utilizzare 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>

Puoi 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>

Che ti permette di avere uno stile comune in .menu con stili specifici usando .main.menu e .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

Answer 6

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.

Verrà comunque eseguito il rendering di una pagina 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.

Answer 7

.class ha come target il seguente elemento:

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

#class ha come target il seguente elemento:

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

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

Answer 8

Il # è 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 di " green " ;:

#green {color: green}

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

Answer 9

Ecco il mio approccio per spiegare le regole .style e #style fanno parte di una matrice. che se non nel giusto ordine, possono scavalcare l'un l'altro o causare conflitti.

Ecco la line up.

Matrix

#style 0,0,1,0 id

.style 0,1,0,0 class

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