Jaka jest różnica między identyfikatorem a klasą?

Jaka jest różnica między <div class="">i <div id="">jeśli chodzi o CSS? Czy można używać <div id="">?

Widzę, że różni programiści robią to na dwa sposoby, a ponieważ jestem samoukiem, nigdy tak naprawdę tego nie rozgryzłem.

idsmusi być wyjątkowy, jeśli classmożna go zastosować do wielu rzeczy. W CSS idwygląda jak, #elementIDa classelementy wyglądają.someClass

Zasadniczo używaj, idgdy chcesz odwoływać się do określonego elementu i classgdy masz wiele podobnych rzeczy. Na przykład, wspólne idelementy są takie rzeczy header, footer, sidebar. Wspólne classelementy to takie jak highlightlub external-link.

Warto przeczytać o kaskadzie i zrozumieć pierwszeństwo przypisane różnym selektorom: http://www.w3.org/TR/CSS2/cascade.html

Najbardziej podstawowym priorytetem, jaki należy zrozumieć, jest jednak to, że idselektory mają pierwszeństwo przed classselektorami. Jeśli miałeś to:

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

i:

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

Tekst byłby czerwony, ponieważ idselektor ma pierwszeństwo przed classselektorem.

Być może analogia pomoże zrozumieć różnicę:

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

Legitymacje studenckie są odrębne. Żadni dwaj studenci w kampusie nie będą mieli takiej samej legitymacji studenckiej . Jednak wielu uczniów może i będzie dzielić ze sobą co najmniej jedną klasę .

Można umieścić wielu uczniów pod jednym tytułem klasy , takim jak biologia. Ale nigdy nie jest dopuszczalne umieszczanie wielu studentów pod jednym dokumentem tożsamości .

Przy wydawaniu Reguły nad systemem szkoła interkomu, można dać Rules do klasy :

„Jutro wszyscy uczniowie będą nosić czerwoną koszulę na lekcje biologii”.

.Biology {
  color: red;
}

Możesz też podać reguły określonemu uczniowi, dzwoniąc na jego unikalny identyfikator :

„Jonathan Sampson ma jutro założyć zieloną koszulę”.

#JonathanSampson {
  color: green;
}

W tym przypadku Jonathan Sampson otrzymuje dwa polecenia: jedno jako uczeń na lekcji biologii, a drugie jako bezpośredni wymóg. Ponieważ Jonathanowi powiedziano bezpośrednio, za pomocą atrybutu id, że ma nosić zieloną koszulę, zignoruje wcześniejsze żądanie założenia czerwonej koszuli.

Bardziej szczegółowe selektory wygrywają.

Gdzie używać identyfikatora w porównaniu z klasą

Prosta różnica między nimi polega na tym, że podczas gdy klasa może być wielokrotnie używana na stronie, identyfikator może być użyty tylko raz na stronę. Dlatego właściwe jest użycie identyfikatora w elemencie div, który oznacza główną treść na stronie, ponieważ będzie tylko jedna główna sekcja zawartości. W przeciwieństwie do tego musisz użyć klasy, aby ustawić na przemian kolory wierszy w tabeli, ponieważ z definicji będą one używane więcej niż jeden raz.

Identyfikatory to niezwykle potężne narzędzie. Element z identyfikatorem może być celem fragmentu JavaScript, który w jakiś sposób manipuluje elementem lub jego zawartością. Atrybut ID może służyć jako cel łącza wewnętrznego, zastępując tagi kotwicy atrybutami nazwy. Wreszcie, jeśli uczynisz swoje identyfikatory jasnymi i logicznymi, mogą one służyć jako rodzaj „własnej dokumentacji” w dokumencie. Na przykład niekoniecznie musisz dodać komentarz przed blokiem stwierdzający, że blok kodu będzie zawierał główną zawartość, jeśli znacznik otwierający bloku ma identyfikator, powiedzmy „główny”, „nagłówek”, „stopka” ”itp.

Identyfikator musi być unikalny na całej stronie.

Klasa może dotyczyć wielu elementów.

Czasami dobrym pomysłem jest używanie identyfikatorów.

Na stronie zwykle masz jedną stopkę, jeden nagłówek ...

Wtedy stopka może być w div z identyfikatorem

<div id = "footer" class = "...">

i nadal mam klasę

CLASS powinny być wykorzystywane do wielu elementów, które mają taką samą stylizacji dla. Identyfikator powinien być unikalny dla elementu. Zobacz ten samouczek .

Powinieneś odwoływać się do standardów W3C, jeśli chcesz być ścisłym konformistą lub chcesz, aby twoje strony były sprawdzane zgodnie ze standardami.

Identyfikatory są unikalne. Klasy nie są. Elementy mogą mieć także wiele klas. Również klasy mogą być dynamicznie dodawane i usuwane do elementu.

Gdziekolwiek możesz użyć identyfikatora, możesz zamiast tego użyć klasy. Odwrotna sytuacja nie jest prawdą.

Konwencja wydaje się polegać na używaniu identyfikatorów dla elementów strony, które znajdują się na każdej stronie (takich jak „pasek nawigacyjny” lub „menu”) i klas dla wszystkiego innego, ale jest to tylko konwencja i można znaleźć dużą różnorodność w użyciu.

Inną różnicą jest to, że w przypadku elementów wejściowych formularza <label>element odwołuje się do pola według identyfikatora, więc musisz użyć identyfikatorów, jeśli zamierzasz użyć <label>. jest kwestią dostępności i naprawdę powinieneś z niego korzystać.

Z biegiem lat identyfikatory były również preferowane, ponieważ są one łatwo dostępne w JavaScript (getElementById). Wraz z pojawieniem się jQuery i innych frameworków Javascript jest to już prawie żaden problem.

Klasy są jak kategorie. Wiele elementów HTML może należeć do klasy, a element HTML może mieć więcej niż jedną klasę. Klasy służą do stosowania ogólnych stylów lub stylów, które można zastosować do wielu elementów HTML.

Identyfikatory to identyfikatory. Są wyjątkowe; nikt inny nie może mieć tego samego identyfikatora. Identyfikatory służą do stosowania unikalnych stylów do elementu HTML.

Używam identyfikatorów i klas w następujący sposób:

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

W tym przykładzie sekcje nagłówka i treści można stylizować za pomocą #header i #content. Każdą sekcję treści można zastosować wspólny styl za pomocą #content .section. Tylko dla kopnięć dodałem „specjalną” klasę do środkowej sekcji. Załóżmy, że chcesz, aby konkretna sekcja miała specjalną stylizację. Można to osiągnąć za pomocą klasy .special, ale sekcja nadal dziedziczy popularne style z #content .section.

Podczas programowania JavaScript lub CSS zwykle używam identyfikatorów, aby uzyskać dostęp do bardzo określonego elementu HTML / manipulować nim, a klas używam do uzyskiwania dostępu / stosowania stylów w szerokim zakresie elementów.

CSS jest zorientowany obiektowo. ID mówi instancję, klasa mówi klasę.

Stosując CSS, zastosuj go do klasy i staraj się unikać jak najwięcej identyfikatora. Identyfikatora należy używać tylko w JavaScript, aby pobrać element lub powiązanie zdarzenia.

Do zastosowania CSS należy użyć klas.

Czasami musisz użyć klas do powiązania zdarzeń. W takich przypadkach staraj się unikać klas używanych do stosowania CSS i raczej dodawaj nowe klasy, które nie mają odpowiedniego CSS. Pomoże to, gdy trzeba zmienić CSS dla dowolnej klasy lub zmienić nazwę klasy CSS razem dla dowolnego elementu.

Przestrzeń selektora CSS pozwala na warunkowy styl identyfikatora:

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

wyrenderuje zgodnie z oczekiwaniami. Dlaczego miałbyś to zrobić? Czasami identyfikatory są generowane dynamicznie itp. Kolejnym zastosowaniem było renderowanie tytułów w różny sposób na podstawie przypisania identyfikatorów wysokiego poziomu:

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

Osobiście wolę selektory dłuższych nazw klas:

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

ponieważ uważam, że używanie zagnieżdżonych identyfikatorów do różnicowania leczenia jest nieco przewrotne. Po prostu wiedz, że gdy programiści w świecie Sass / SCSS biorą się za te rzeczy, zagnieżdżone identyfikatory stają się normą.

Wreszcie, jeśli chodzi o wydajność selektora i pierwszeństwo, ID zwykle wygrywa. To jest zupełnie inny temat.

Każdy element może mieć klasę lub identyfikator.

Klasa służy do odwoływania się do określonego rodzaju wyświetlania, na przykład możesz mieć klasę css dla div, która reprezentuje odpowiedź na to pytanie. Ponieważ będzie wiele odpowiedzi, wiele div potrzebuje tej samej stylizacji i użyłbyś klasy.

Identyfikator odnosi się tylko do jednego elementu, na przykład pokrewna sekcja po prawej stronie może mieć specyficzne dla niego style, których nie można użyć w innym miejscu, użyłby identyfikatora.

Technicznie możesz do tego użyć klas lub podzielić je logicznie. Nie można jednak ponownie użyć identyfikatorów dla wielu elementów.

Klasa służy do zastosowania Twojego stylu do grupy elementów. Style identyfikatora dotyczą tylko elementu o tym identyfikatorze (powinien istnieć tylko jeden). Zwykle używasz klas, ale jeśli jest to jednorazowe, możesz użyć identyfikatorów (lub po prostu przykleić styl prosto do elementu).

W zaawansowanych identyfikatorach programowania możemy w zasadzie używać JavaScript.

Dla powtarzalnych celów klasy są przydatne w przeciwieństwie do identyfikatorów, które powinny być unikalne.

Poniżej znajduje się przykład ilustrujący powyższe wyrażenia:

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

Teraz możesz zobaczyć tutaj boxi box1są dwa (2) różne <div>elementy, ale możemy zastosować klasy boxi bg-color-reddo obu z nich.

Pojęciem jest dziedziczenie w języku OOP .

1) identyfikator div nie jest wielokrotnego użytku i powinien być stosowany tylko do jednego elementu HTML, natomiast klasa div może być dodana do wielu elementów.

2) Identyfikator ma większe znaczenie, jeśli oba zostaną zastosowane do tego samego elementu i mają sprzeczne style, zostaną zastosowane style identyfikatora.

3) Element stylu zawsze odwołuje się do klasy div, umieszczając a. (kropka) przed ich nazwami, podczas gdy klasa div id jest określana przez umieszczenie # (hash) przed ich nazwami.

4) Przykład: -

klasa w <style>deklaracji -.red-background { background-color: red; }

identyfikator w <style>deklaracji - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Tutaj tło będzie w kolorze niebieskim

idi classsą dwoma globalnymi / standardowymi atrybutami HTML (poniższe globalne atrybuty można stosować w dowolnym elemencie HTML).

class Określa jedną lub więcej nazw klas dla elementu (odnosi się do klasy w arkuszu stylów)

id Określa unikalny identyfikator elementu

Atrybuty id dają elementowi unikalny w całym dokumencie identyfikator, w którym atrybut klasy zapewnia sposób klasyfikowania podobnych elementów.

Wartość atrybutu id musi być unikalna na stronie HTML, gdzie atrybut klasy może być ponownie użyty wszędzie tam, gdzie chcesz zastosować te same właściwości

Klasa jest używana dla wielu elementów, które mają wspólne atrybuty. Na przykład, jeśli chcesz mieć ten sam kolor i czcionkę zarówno dla p, jak i taga, użyj atrybutu class lub w samym podziale.

Z drugiej strony identyfikator służy do podświetlania atrybutów jednego elementu i jest używany wyłącznie do określonego elementu. Na przykład mamy tag h1 z niektórymi atrybutami, nie chcielibyśmy, aby powtarzały się w innych elementach na stronie.

Należy zauważyć, że jeśli używamy zarówno klasy, jak i identyfikatora w elemencie, * id przewyższa atrybuty klasy. * Po prostu dlatego, że identyfikator jest przeznaczony tylko dla jednego elementu

Zobacz poniższy przykład

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

Generujemy wynik

Wynik