Qual è la differenza tra un id e una classe?

https://stackoverflow.com/questions/544010

23-08-2019
|

Domanda

Qual è la differenza tra <div class=""> e <div id=""> quando si tratta di CSS? E 'bene usare <div id="">?

Vedo diversi sviluppatori di fare questo in entrambi i modi, e dato che io sono autodidatta, non ho mai realmente capito.

Soluzione

ids deve essere univoco dove come class può essere applicato a molte cose. In CSS, ids sembrano elementi #elementID e class assomigliare .someClass

In generale, utilizzare id ogni volta che si vuole fare riferimento ad un elemento e class specifico quando si dispone di un certo numero di cose che sono tutti uguali. Per esempio, gli elementi id comuni sono cose come header, footer, sidebar. Elementi comuni class sono cose come highlight o external-link.

E 'una buona idea di leggere su cascata e capire la precedenza assegnata ai vari selettori: http://www.w3.org/TR/CSS2/cascade.html

La precedenza più semplice che si dovrebbe capire, tuttavia, è che i selettori id hanno la precedenza sui selettori class. Se tu avessi questo:

<p id="intro" class="foo">Hello!</p>

#intro { color: red }
.foo { color: blue }

Il testo sarebbe rosso perché il selettore id ha la precedenza sul selettore di class.

Altri suggerimenti

Forse un'analogia aiuterà capire la differenza:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

studenti ID le carte sono distinti. Non ci sono due studenti del campus avranno lo stesso studente ID della carta. Tuttavia, molti studenti possono e condivideranno almeno una Class con l'altro.

E 'bene mettere più studenti sotto lo stesso Class titolo, come la biologia. Ma non è mai accettabile per mettere più studenti sotto uno studente ID .

Nel dare Regole il sistema scolastico citofono, si può dare Regole per un Class :

"Domani, tutti gli studenti devono indossare una camicia rossa a lezione di biologia."

.Biology {
  color: red;
}

Oppure si può dare regole a uno studente specifico, chiamando il suo unico ID :

"Jonathan Sampson è quello di indossare una camicia verde domani".

#JonathanSampson {
  color: green;
}

In questo caso, Jonathan Sampson sta ricevendo due comandi: uno come studente nella classe di biologia, e un altro come requisito diretta. Perché Jonathan è stato detto direttamente, tramite l'attributo id, di indossare una camicia verde, che non tiene conto della precedente richiesta di indossare una camicia rossa.

I selettori più specifici vincere.

Dove utilizzano un ID contro una classe

La semplice differenza tra i due è che, mentre una classe può essere utilizzato più volte in una pagina, un ID deve essere utilizzato solo una volta per pagina. Pertanto, è opportuno utilizzare un ID sull'elemento div che sta segnando il contenuto principale della pagina, in quanto vi sarà un solo contenuto principale. Al contrario, è necessario utilizzare una classe per impostare i colori delle righe alternati su un tavolo, come sono, per definizione, sta per essere utilizzato più di una volta.

ID sono uno strumento incredibilmente potente. Un elemento con un ID può essere bersaglio di un pezzo di JavaScript che manipola l'elemento o il suo contenuto in qualche modo. L'attributo ID può essere utilizzato come destinazione di un link interno, sostituendo i tag di ancoraggio con gli attributi di nomi. Infine, se si fanno gli ID chiaro e logico, possono servire come una sorta di “documentazione di sé” all'interno del documento. Ad esempio, non è necessariamente bisogno di aggiungere un commento prima di un blocco che indica che un blocco di codice conterrà il contenuto principale se il tag del blocco di apertura ha un ID di, diciamo, "colpo di testa", "piè di pagina "principale" ", ecc.

Un ID deve essere univoco in tutta la pagina.

Una classe può applicare a molti elementi.

A volte, è una buona idea di utilizzare gli ID.

In una pagina, di solito si hanno un piè di pagina, un colpo di testa ...

Poi il piè di pagina può essere in un div con un id

e avere ancora una classe

Un CLASS deve essere usato per più elementi che si desidera lo stesso stile per. Un ID dovrebbe essere per un elemento unico. Vedere questo esercitazione .

Si dovrebbe fare riferimento alla standard W3C se si vuole essere un rigoroso conformista, o se si desidera che le pagine siano convalidato agli standard.

ID sono univoci. Le classi non sono. Gli elementi possono anche avere più classi. Anche classi possono essere aggiunti e rimossi dinamicamente a un elemento.

Ovunque è possibile utilizzare un ID è possibile utilizzare una classe, invece. Il contrario non è vero.

La convenzione sembra essere quello di utilizzare gli ID di elementi della pagina che si trovano in ogni pagina (come "barra di navigazione" o "menu") e le classi per tutto il resto, ma questo è solo convenzione e troverete ampie variazioni nell'uso.

Un altra differenza è che per elementi di input modulo, l'elemento <label> riferimento a un campo da ID, quindi è necessario utilizzare gli ID se avete intenzione di usare <label>. è una cosa accessibilità e si dovrebbe davvero usarlo.

Negli anni passati gli ID sono stati anche preferito perché sono facilmente accessibili in Javascript (getElementById). Con l'avvento di jQuery e altri framework JavaScript Questo è praticamente un non-problema ora.

Le classi sono come le categorie. Molti elementi HTML possono appartenere ad una classe, e un elemento HTML può avere più di una classe. Le classi sono utilizzati per applicare stili di carattere generale o stili che possono essere applicati su più elementi HTML.

Gli ID sono identificatori. Sono unici; nessun altro è permesso di avere lo stesso ID. Gli ID sono utilizzati per applicare stili unici di un elemento HTML.

Io uso gli ID e le classi in questo modo:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

In questo esempio, le sezioni del collettore e di contenuto può essere designato tramite #header e #content. Ogni sezione del contenuto può essere applicato uno stile comune attraverso #content .section. Solo per i calci, ho aggiunto una classe "speciale" per la sezione centrale. Supponiamo che si voleva una particolare sezione di avere uno stile speciale. Ciò può essere ottenuto con la classe .Special, eppure la sezione eredita ancora gli stili comuni da .section #content.

Quando faccio JavaScript o CSS sviluppo, Io di solito uso gli ID di accesso / manipolare un elemento HTML molto specifico, e io uso le classi per l'accesso / applicare stili a una vasta gamma di elementi.

CSS è orientato agli oggetti. ID dice esempio, di classe dice di classe.

CSS spazio selettore consente in realtà per lo stile id condizionale:

h1#my-id {color:red}
p#my-id {color:blue}

renderà come previsto. Perché si fare questo? A volte gli ID vengono generati dinamicamente, ecc Un ulteriore utilizzo è stato quello di rendere i titoli in modo diverso sulla base di un incarico di alto livello ID:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

Personalmente, preferisco selettori classname più lunghi:

body#list-page .title-block > h1 {font-size:56px}

come trovo utilizzando gli ID nidificati per differenziare il trattamento di essere un po 'perverso. Basta sapere che, come sviluppatori nel Sass / SCSS mondo mettere le mani su questa roba, gli ID nidificati stanno diventando la norma.

Infine, quando si tratta di selezione delle prestazioni e la precedenza, ID tende a vincere fuori. Questo è un altro intero argomento.

Quando si applica CSS, applicarlo a una classe e cercare di evitare il più possibile per un id. L'ID deve essere utilizzato solo in JavaScript per andare a prendere l'elemento o per l'associazione ogni caso.

Le classi dovrebbero essere utilizzati per applicare i CSS.

A volte c'è bisogno di utilizzare le classi per il legame evento. In questi casi, cercare di evitare le classi che vengono utilizzati per l'applicazione di CSS e piuttosto aggiungere nuove classi che non ha corrispondenti CSS. Ciò avverrà per aiutare quando è necessario cambiare il CSS per qualsiasi classe o modificare il nome della classe CSS tutti insieme per ogni elemento.

Ogni elemento può avere una classe o un id.

Una classe viene utilizzato per fare riferimento un certo tipo di visualizzazione, ad esempio, si può avere una classe CSS per un div che rappresenta la risposta a questa domanda. Come ci saranno molte risposte, più div avrebbero bisogno lo stesso stile e si sarebbe utilizzare una classe.

Un id si riferisce ad un solo elemento, ad esempio la relativa sezione a destra può avere styling specifica non riutilizzato altrove, dovrebbe usare un id.

Tecnicamente è possibile utilizzare le classi per tutto, o dividere logicamente. Non si può, tuttavia, riutilizzare id per più elementi.

Class è per applicare il vostro stile per un gruppo di elementi. stili di identificazione si applicano al solo elemento con ID che (ci dovrebbe essere solo uno). Di solito si utilizzano le classi, ma se c'è un one-off è possibile utilizzare gli ID (o semplicemente attaccare lo stile direttamente nel elemento).

In sviluppo avanzato id s possiamo fondamentalmente usare JavaScript.

Ai fini ripetibili, class es tornare utile in contrasto con id s, che dovrebbe essere unico.

Segue un esempio che illustra le espressioni di cui sopra:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

Ora è possibile vedere qui box e box1 sono due (2) diverse <div> elementi, ma siamo in grado di applicare le classi box e bg-color-red ad entrambi.

Il concetto è eredità in un OOP lingua.

1) div id non è riutilizzabile e dovrebbe essere applicata solo uno degli elementi di HTML, mentre div class può essere aggiunto a più elementi.

2) un ID ha maggiore importanza se entrambi sono applicate allo stesso elemento e hanno stili contrastanti, verranno applicati gli stili del id.

3) elemento di stile si riferiscono sempre una classe div mettendo a. (Punto) di fronte ai loro nomi mentre la classe div id viene definito mettendo un # (cancelletto) davanti ai loro nomi.

4) Esempio: -

classe nella dichiarazione <style> - .red-background { background-color: red; }

id in dichiarazione <style> -   #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div>   Qui sfondo sarà di colore blu

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow