classe div vs id

Question

Quando si utilizzano i div, quando è meglio utilizzare una classe rispetto a un ID?

È meglio usare la classe, ad esempio la variante del carattere o gli elementi all'interno dell'HTML?Quindi utilizzare l'ID per la struttura/contenitori?

Questo è qualcosa su cui sono sempre stato un po' incerto, qualsiasi aiuto sarebbe fantastico.

Answer 1

Utilizzo id per identificare gli elementi di cui sarà presente una sola istanza in una pagina.Ad esempio, se hai una singola barra di navigazione da posizionare in una posizione specifica, utilizza id="navigation".

Utilizzo class per raggruppare elementi che si comportano tutti in un certo modo.Ad esempio, se desideri che il nome della tua azienda appaia in grassetto nel corpo del testo, potresti utilizzare <span class='company'>.

Answer 2

La cosa più importante da capire è che gli ID devono essere univoci:all'interno di una pagina dovrebbe esistere un solo elemento con un determinato ID.Pertanto, se desideri fare riferimento a un elemento specifico della pagina, spesso è la cosa migliore da utilizzare.

Se hai più elementi che sono in qualche modo simili, dovresti usare la classe elements per identificarli.

Un fatto molto utile e sorprendentemente poco noto è che è possibile applicare più classi a un singolo elemento inserendo degli spazi tra i nomi delle classi.Pertanto, se hai pubblicato una domanda scritta dall'utente attualmente connesso, potresti identificarla con <div class="question currentAuthor">.

Answer 3

Pensa all'Università.

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

Alunno ID le carte sono distinte.Non esistono due studenti nel campus che avranno lo stesso studente ID carta.Tuttavia, molti studenti possono e ne condivideranno almeno uno Classe insieme.

Va bene mettere più studenti sotto uno Classe titolo, Biologia 101.Ma non è mai accettabile mettere più studenti sotto uno studente ID.

Quando si dà Regole tramite il citofono della scuola, puoi dare Regole ad a Classe:

"La classe di biologia, domani, potrebbe indossare magliette rosse?"

.BiologyClass {
  shirt-color:red;
}

Oppure puoi dare regole ad uno Studente Specifico, chiamandolo unico ID:

"Jonathan Sampson, per favore, potrebbe indossare una camicia verde domani?"

#JonathanSampson {
  shirt-color:green;
}

Answer 4

Gli ID devono essere univoci ma nei CSS hanno anche la priorità quando si decide quale delle due istruzioni in conflitto seguire.

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

#section {font-color:#fff}
.section {font-color:#000}

Il testo sarebbe bianco.

Answer 5

le classi sono ottime quando desideri applicare stili simili a molti div o elementi diversi.gli ID sono utili quando si desidera indirizzare un elemento specifico per la formattazione o per l'aggiornamento con JavaScript.

Answer 6

Un ulteriore vantaggio derivante dall'utilizzo di un ID è la possibilità di indirizzarlo in un tag di ancoraggio:

<h2 id="CurrentSale">Product I'm selling</h2>

Ti consentirà di collegarti direttamente in qualche altro punto a quel punto della pagina:

<a href="#CurrentSale">the Current Sale</a>

Un utilizzo comune sarebbe quello di assegnare a ciascun titolo di un blog un ID con data (ad esempio id="date20080408") che ti consentirebbe di indirizzare specificamente quella sezione della pagina del blog.

È anche importante ricordare che esistono regole di denominazione più limitate per gli ID, principalmente che non possono iniziare con un numero.Vedi una domanda SO simile: Qual è un valore valido per gli attributi ID in HTML

Answer 7

Lo stesso standard HTML risponde alla tua domanda:

Non possono esistere due oggetti con lo stesso ID, ma un numero arbitrario di oggetti può avere la stessa classe.

Pertanto, se desideri applicare determinati attributi di stile CSS solo a un singolo DIV, quello sarebbe un ID.Se desideri che determinati attributi di stile si applichino a più DIV, deve essere una classe.

Tieni presente che puoi mescolarli entrambi.Puoi fare in modo che due DIV appartengano alla stessa classe, ma assegnare loro ID diversi.È quindi possibile applicare lo stile comune a entrambi alla classe e le cose specifiche di uno dei due al proprio ID.Il browser applicherà prima lo stile della classe e poi lo stile dell'ID, in modo che gli stili dell'ID possano sovrascrivere qualunque cosa una classe abbia impostato in precedenza.

Answer 8

Alcune altre cose da tenere a mente:

• Quando usi ASP.Net non hai il controllo completo sull'ID degli elementi, quindi devi praticamente usare class (nota che questo è meno vero di quanto lo fosse una volta).

• È meglio usare nessuno dei due, quando puoi aiutarlo.Specificare invece il tipo di elemento e il suo tipologia del genitore.Ad esempio, una lista non ordinata contenuta all'interno di div con la classe navarea potrebbe essere individuata in questo modo:

  div.NavArea ul { /* styles go here */ }
  

Ora puoi modellare il divisione logica per gran parte dell'intera navarea con un'applicazione di classe.

Answer 9

Gli ID dovrebbero essere univoci.Le lezioni dovrebbero essere condivise.Pertanto, se disponi di una formattazione CSS che verrà applicata a più DIV, utilizza una classe.Se ne esiste solo uno (come requisito, non come caso), utilizzare un ID.

Answer 10

Penso che tutti sappiamo cos'è la classe, ma se pensi agli ID come identificatori piuttosto che come strumenti di styling, non sbaglierai molto.Hai bisogno di un identificatore quando provi a prendere di mira qualcosa e se hai più di un articolo con lo stesso ID, non puoi più identificarlo...

Quando si tratta di scrivere i tuoi CSS per ID e CLASSE, è utile utilizzare classi CSS minime il più possibile e cercare di non appesantirsi troppo con gli ID finché non DEVI farlo, altrimenti mirerai costantemente a scrivere dichiarazioni e dichiarazioni più forti presto avrai un file CSS pieno di !important.

Answer 11

Dove utilizzare un ID rispetto a una classe

La semplice differenza tra i due è che mentre una classe può essere utilizzata ripetutamente su una pagina, un ID deve essere utilizzato solo una volta per pagina.Pertanto, è opportuno utilizzare un ID sull'elemento div che contrassegna il contenuto principale della pagina, poiché ci sarà solo una sezione del contenuto principale.Al contrario, è necessario utilizzare una classe per impostare i colori delle righe alternate su una tabella, poiché per definizione verranno utilizzati più di una volta.

Gli ID sono uno strumento incredibilmente potente.Un elemento con un ID può essere il bersaglio di un pezzo di JavaScript che manipola in qualche modo l'elemento o il suo contenuto.L'attributo ID può essere utilizzato come destinazione di un collegamento interno, sostituendo i tag di ancoraggio con gli attributi del nome.Infine, se rendi i tuoi ID chiari e logici, possono fungere da sorta di “autodocumentazione” all’interno del documento.Ad esempio, non è necessariamente necessario aggiungere un commento prima di un blocco affermando che un blocco di codice conterrà il contenuto principale se il tag di apertura del blocco ha un ID, ad esempio, "main", "header", "footer ", eccetera.

Answer 12

Se si tratta di uno stile che desideri utilizzare in più punti di una pagina, utilizza una classe.Se desideri molta personalizzazione per un singolo oggetto, ad esempio una barra di navigazione sul lato della pagina, allora un ID è la soluzione migliore, perché probabilmente non avrai bisogno di quella combinazione di stili da nessun'altra parte.

Answer 13

id dovrebbe essere l'identificatore univoco dell'elemento sulla pagina, che aiuta a manipolarlo.Qualsiasi stile definito esternamente dai CSS che dovrebbe essere utilizzato in più di un elemento dovrebbe andare nell'attributo class

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Answer 14

Usa un ID per un elemento univoco sulla pagina con cui vuoi fare qualcosa di molto specifico e una classe per qualcosa che potresti riutilizzare in altre parti della pagina.

Answer 15

IL id viene utilizzato per gli elementi per identificarli in modo univoco all'interno del documento, mentre l' classe L'attributo può avere lo stesso valore condiviso da più elementi nello stesso documento.

Quindi, in realtà, se c'è solo un elemento per documento che utilizzerà lo stile (ad esempio, #title), allora vai con id.Se più elementi possono utilizzare lo stile, procedi con classe.

Answer 16

Direi che è meglio usare una classe ogni volta che pensi che un elemento di stile verrà ripetuto su una pagina.Elementi come HeaderImage, FooterBar e simili vanno bene come ID poiché lo utilizzerai solo una volta e ti aiuterà a impedirti di duplicarlo accidentalmente, poiché alcuni editor ti avviseranno quando hai ID duplicati.

Posso anche ritenerlo utile se intendi generare gli elementi div in modo dinamico e desideri scegliere come target un elemento specifico per la formattazione;puoi semplicemente dargli l'ID corretto alla generazione invece di cercare l'elemento e quindi aggiornare la sua classe.

Answer 17

La mia scelta preferita è utilizzare l'identificazione della classe quando gli stili CSS vengono applicati a diversi div nello stesso modo.Se la struttura o il contenitore vengono effettivamente applicati solo una volta o possono ereditare il proprio stile dall'impostazione predefinita, non vedo alcun motivo per utilizzare l'identificazione della classe.

Quindi dipenderebbe dal fatto che il tuo div sia uno dei tanti;ad esempio, un div che rappresenta una domanda a una risposta sul sito Web StackOverflow.Qui dovresti definire lo stile per la classe "Risposta" e applicarlo a ciascun div "Risposta".

Answer 18

Se utilizzi i controlli Web .Net, a volte è molto più semplice utilizzare semplicemente le classi poiché .Net altera gli ID div dei controlli Web in fase di esecuzione (dove utilizzano runat="server").

L'uso delle classi ti consente di creare facilmente stili con classi separate per caratteri, spaziatura, bordi, ecc.Generalmente utilizzo più file per memorizzare tipi separati di informazioni di formattazione, ad es.basic_styles.css per la formattazione semplice dell'intero sito, ie6_styles.css per stili specifici del browser (in questo caso IE6) ecc. e template_1.css per informazioni sul layout.

Qualunque sia il modo in cui scegli, cerca di essere coerente per facilitare la manutenzione.

Answer 19

Inoltre, un elemento a cui assegni un ID specifico può essere manipolato tramite comandi JavaScript e DOM, ad esempio GetElementById.

In generale, trovo utile dare un ID a tutti i principali div strutturali - anche se inizialmente non ho regole CSS specifiche da applicare, ho questa capacità lì per il futuro.D'altra parte, utilizzo le classi per quegli elementi che potrebbero essere utilizzati più volte, ad esempio un div contenente un'immagine e una didascalia. Potrei avere diverse classi, ciascuna con valori di stile leggermente diversi.

Ricorda però, a parità di condizioni, che le regole di stile in una specifica id hanno la precedenza su quelle in una specifica di classe.

Answer 20

Oltre al fatto che gli ID e le classi sono ottimi per impostare lo stile su un singolo oggetto rispetto a un insieme simile di oggetti, c'è anche un altro avvertimento da ricordare.Dipende anche dalla lingua in una certa misura.In ASP.Net, puoi inserire Div e avere ID.Ma se usi un Panel invece del Div perderai l'id.

Answer 21

Le classi sono per stili che puoi utilizzare più volte su una pagina, gli ID sono identificatori univoci che definiscono casi speciali per gli elementi.Gli standard dicono che gli ID dovrebbero essere utilizzati solo una volta in una pagina.Quindi dovresti usare le classi quando vuoi usare uno stile su più di un elemento in una pagina e un ID quando vuoi usarlo solo una volta.

Un'altra cosa è che per le classi puoi utilizzare più valori (inserendo spazi tra ogni classe, a la "class='blagh blah22 blah') mentre con gli ID puoi utilizzare solo ID per elemento.

Gli stili definiti per gli ID sovrascrivono gli stili definiti per le classi, quindi in , le impostazioni di stile di #uniquething sovrascriveranno lo stile di .whatever se i due sono in conflitto.

Quindi probabilmente dovresti usare gli ID per cose come l'intestazione, la tua "barra laterale" o qualsiasi altra cosa e così via - cose che appaiono solo una volta per pagina.

Answer 22

Per me : Se utilizzo le classi quando farò qualcosa in CSS o aggiungerò un nome agli elementi e posso utilizzarlo in tutti gli elementi di una pagina.

Quindi gli ID che utilizzo per l'elemento univoco

Esempio:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}