Што выкарыстоўваць <DIV клас = "імя"> або <DIV ID = "імя">?

Я вывучаю HTML. Можа хто-то калі ласка, скажыце мне, у чым розніца паміж класам і ідэнтыфікатарам і калі выкарыстоўваць адзін над іншым? Яны, здаецца, робяць тое ж самае

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

<div id="mycolor1">     hello world </div>
<div class="mycolor2">     hello world </div>

</body>
</html>
6
Аформіць гэта тлумачэнне на w3c школах.
дададзена аўтар Jens, крыніца
@AnthonyGrist: Дзякуй. W3Schools прыходзіць даволі часта, калі звяртаючыся да дапамогі CSS пытанняў. Я ніколі не цалкам усвядомлены імя. Але w3fools.com выглядае цікава чытаць.
дададзена аўтар Jens, крыніца
Відавочна, што гэта дублікат пытанне, ёсць 4 прыкладу аднаго і таго ж пытання ў Linked секцыі на правай баку гэтага сайта.
дададзена аўтар Greg, крыніца
дададзена аўтар Adam Pope, крыніца
Для такіх збеглых пытанняў, калі ласка, пашукайце першым - трохі папярэдніх ведаў будуць прайсці доўгі шлях у пісьмовым выглядзе лепш пытанне. Паспрабуйце нешта накшталт «HTML ід супраць класа» для пачаткоўцаў.
дададзена аўтар user2246674, крыніца
Дублікаты тут , тут , тут (і, верагодна, больш).
дададзена аўтар ajp15243, крыніца
Я атрымаў у звычку дадання -w3schools для ўсіх вэб-тэхналогій, звязаных з Google пошук, каб адфільтраваць вынікі w3schools. Я таксама часам папярэднічаць пошук з w3c , каб атрымаць W3C-афіцыйныя старонкі.
дададзена аўтар ajp15243, крыніца
@Jens Гэта не w3c школы, што сайт не мае нічога агульнага з W3C . Таксама зьвярніце ўвагу на w3fools.com
дададзена аўтар Anthony Grist, крыніца

10 адказы

Яны не робяць тое ж самае. <�Код> ідэнтыфікатар выкарыстоўваецца для нацэльвання на пэўны элемент, имя_класса можна выкарыстоўваць таргетынг на некалькі элементаў.

прыклад:

<div id="mycolor1" class="mycolor2">     hello world </div>
<div class="mycolor2">     hello world2 </div>
<div class="mycolor2">     hello world3 </div>

Зараз, вы можаце звярнуцца ўсе DIV s з имя_класса mycolor2 на адзін раз

.mycolor2{ color: red } //for example - in css

Гэта было б ўсталяваць усе вузлы з класам mycolor2 у чырвоны .

Тым не менш, калі вы хочаце ўсталяваць спецыяльна mycolor1 у сіні , вы можаце арыентаваць яго адмыслова, як гэта:

#mycolor1{ color: blue; }
16
дададзена

Read the spec for the attributes and for CSS.

  • id must be unique. class does not have to be
  • id has higher (highest!) specificity in CSS
  • Elements can have multiple non-ordinal classes (separated by spaces), but only one id
  • It is faster to select an element by it's ID when querying the DOM
  • id can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors ()
11
дададзена
@steveh выбару з дапамогай JavaScript або CSS. ID мае больш высокую спецыфічнасць, чым клас у абодвух выпадках. ID ідэнтыфікуе <�я> адзін элемент, а клас можа ідэнтыфікаваць многія
дададзена аўтар Explosion Pills, крыніца
Звярніце ўвагу, што назва атрыбут элементаў Obselete .
дададзена аўтар ajp15243, крыніца
@steveh Элемент ID атрыбут мае мноства ужыванняў, так як гэты адказ паказвае. Ён прызначаны для ідэнтыфікацыі адзінага элемента на вашай старонцы, а затым можа быць выкарыстаны для многіх рэчаў, такіх як селектар стылю, з URI фрагмент (напрыклад, націсніце на спасылку пад Зместу баксаваць на гэтым Вікіпедыі старонцы, і ўбачыць # змешчаны ў URL і як яна пракручваецца ў гэты раздзел, з-за браўзэр знаходзячы адпаведнасць ідэнтыфікатар ), або як спосаб хутка/лёгка/эфектыўна выбраць гэты элемент у JavaScript для любой JS функцыянальнасці вы можаце пісаць.
дададзена аўтар ajp15243, крыніца
але тое, што я заблытаўся аб тым, калі выкарыстоўваць ID. Я выкарыстоўваю клас стыль элемента. ID, здаецца, выкарыстоўваецца толькі ў якасці якара тады? Так што, калі ў мяне ёсць элемент, які я хачу, каб стыль чырвонымі, але не спасылка на яго, чаму я павінен выкарыстоўваць ідэнтыфікатар стыль элемента? (Вы кажаце пра выбраць элемент. Ыбар кім? Дзе?
дададзена аўтар steve h, крыніца

Класы павінны быць выкарыстаны, калі ў вас ёсць некалькі падобных элементаў.

Прыклад: Шмат DIV-х, якія адлюстроўваюць тэксты песень, вы можаце прысвоіць ім клас лірыцы , так як яны ўсё падобныя.

ID павінен быць унікальным! Яны выкарыстоўваюцца для вырашэння канкрэтных элементаў

Ex: уваход для карыстальнікаў электроннай пошты можа мець ідэнтыфікатар txtEmail - Ні адзін іншы элемент не павінен мець гэты ідэнтыфікатар.

1
дададзена

Сам аб'ект не зменіцца. Асноўнае адрозненне паміж гэтымі 2 ключавымі словамі з'яўляецца выкарыстанне:

    <�Літый> Элемент <�моцны> ID </моцны>, як правіла, адна на старонцы
  • Элемент <�моцны> класа можа мець адзін ці шмат уваходжанняў

У CSS ці Javascript файлаў:

  • The ID will be accessed by the character #
  • The class will be accessed by the character .
1
дададзена

Выяўляючыся simnply: ідэнтыфікатар з'яўляецца унікальным для ўсяго адзін элемента ў цэлым HTML дакумента, але клас можа быць дададзены да шматлікіх элементам.

Акрамя таго, ID ўласцівасць мае прыярытэт над ўласцівасцямі класа.

Ідэнтыфікатары і класы асабліва карысныя, калі вы плануеце выкарыстоўваць Javascript або любы з яго рамак.

1
дададзена
    <�Літый> селектар Ідэнтыфікатар выкарыстоўваецца пры звароце да аднаго унікальнаму элементу. <�Літый> селектар класа рэферэрам група элементаў.

Напрыклад, калі ў вас ёсць некалькі кнопак, якія выглядаюць аднолькава, вы павінны выкарыстоўваць клас = «MyButton», каб мець паслядоўную кладку.

З пункту гледжання прадукцыйнасці:

CSS селектары адпавядае справа налева .

Таму .MyClass павінен быць «хутчэй», чым #myID, таму што ён прапускае тэставанне.

Хуткасць прадукцыйнасці нязначная для звычайна старонак фармату, і вы, верагодна, не заўважыце розніцы, так што гэта ў асноўным толькі аб канвенцыі.

Here is more info on why CSS is browsers match CSS selectors from right to left

0
дададзена

Ідэнтыфікатары павінны быць унікальным (прадастаўляецца толькі адзін элемент у DOM у той час), у той час як класы не павінны быць. Вы ўжо адкрылі CSS . клас і # ID прэфіксы, так што ў значнай ступені гэта.

0
дададзена

ID забяспечвае унікальны Indentifier для элемента, у выпадку, калі вы хочаце, каб маніпуляваць ім у JavaScript. Атрыбут класа можа быць выкарыстаны для лячэння групы HTML элементаў такой жа, асабліва ў дачыненні да шрыфтоў, кветак і іншых уласцівасцяў стылю ...

0
дададзена

клас выкарыстоўваецца, калі і хоча, каб усталяваць ўласцівасці для групы элементаў, але ідэнтыфікатар можа быць усталяваны толькі адзін элемент.

0
дададзена

ID падыходзіць для элементаў, якая ўзнікае толькі адзін раз як Лагатып бакавой панэлі кантэйнера

А Класс падыходзіць для элементаў, які мае той жа карыстацкі інтэрфейс, але яны могуць быць больш за адзін раз. як

.feed ў #feeds Container

0
дададзена