Яка різниця між ідентифікатором та класом?

Яка різниця між <div class="">і <div id="">коли мова йде про CSS? Це добре використовувати <div id="">?

Я бачу різних розробників, які роблять це обома способами, і оскільки я самоучка, я ніколи не розумів цього.

idsповинні бути унікальними там, де це classможна застосувати до багатьох речей. У CSS idвиглядають s #elementIDі classвиглядають елементи.someClass

Загалом, використовуйте idбудь-коли, коли ви хочете посилатися на певний елемент і classколи у вас є ряд речей, які однакові. Наприклад, загальні idелементи таких речей , як header, footer, sidebar. Поширеними classелементами є такі речі, як highlightабо external-link.

Добре зачитати на каскаді та зрозуміти пріоритет, призначений різним селекторам: http://www.w3.org/TR/CSS2/cascade.html

Однак найголовніший пріоритет, який ви повинні розуміти, - це те, що idселектори мають перевагу над classселекторами. Якщо у вас це було:

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

і:

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

Текст буде червоним, оскільки idселектор має перевагу перед classселектором.

Можливо, аналогія допоможе зрозуміти різницю:

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

Посвідчення особи студента є різними. У двох студентів на кампусі не буде однакової посвідчення студента . Однак багато студентів можуть і поділяться принаймні одним класом один з одним.

Неправильно розміщувати декількох учнів під одним заголовком класу , наприклад, з біології. Але ніколи не прийнятно розміщувати кількох студентів під одним посвідченням студента .

Даючи правил по системі шкільної інтерком, ви можете дати правила для в класі :

"Завтра всі студенти повинні одягнути червону сорочку до класу біології".

.Biology {
  color: red;
}

Або ви можете дати правила конкретному студенту, зателефонувавши до його унікального ідентифікатора :

"Джонатан Сампсон завтра одягне зелену сорочку".

#JonathanSampson {
  color: green;
}

У цьому випадку Джонатан Сампсон отримує дві команди: одну як студента в класі біології, а іншу як пряму вимогу. Оскільки Джонатану сказали безпосередньо, через атрибут id, носити зелену сорочку, він нехтуватиме попереднім проханням носити червону сорочку.

Перемагають більш конкретні селектори.

Де використовувати ідентифікатор проти класу

Проста різниця між ними полягає в тому, що, хоча клас можна багаторазово використовувати на сторінці, ідентифікатор повинен використовуватися лише один раз на сторінці. Тому доцільно використовувати ідентифікатор на елементі div, який позначає основний контент на сторінці, оскільки буде лише один основний розділ вмісту. На відміну від цього, ви повинні використовувати клас для встановлення змінних кольорів рядків на таблиці, оскільки вони за визначенням будуть використовуватися не один раз.

Ідентифікатори - неймовірно потужний інструмент. Елемент з ідентифікатором може бути ціллю фрагмента JavaScript, який певним чином маніпулює елементом або його вмістом. Атрибут ID може бути використаний як ціль внутрішнього посилання, замінюючи якірні теги атрибутами імені. Нарешті, якщо ви зробите свої посвідчення особи чіткими та логічними, вони можуть слугувати своєрідною "самодокументацією" всередині документа. Наприклад, вам не обов'язково потрібно додавати коментар перед блоком, вказуючи, що блок коду буде містити основний вміст, якщо вступний тег блоку має ідентифікатор, скажімо, "головного", "заголовка", "колонтитула" "тощо.

Ідентифікатор повинен бути унікальним на всій сторінці.

Клас може застосовуватися до багатьох елементів.

Іноді корисно використовувати ідентифікатори.

На сторінці у вас зазвичай є один колонтитул, один заголовок ...

Тоді нижній колонтитул може потрапити в div з ідентифікатором

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

і ще мають клас

CLASS повинен бути використаний для кількох елементів , які ви хочете один і той же стиль для. ID повинен бути унікальним для елемента. Дивіться цей підручник .

Вам слід посилатися на стандарти W3C, якщо ви хочете бути суворим конформістом або якщо ви хочете, щоб ваші сторінки були затверджені до стандартів.

Ідентифікатори унікальні. Заняття - ні. Елементи також можуть мати кілька класів. Також класи можуть бути динамічно додані та видалені до елемента.

Де б ви не могли використовувати ідентифікатор, натомість можете використовувати клас. Зворотний неправда.

Здається, умовно використовувати ідентифікатори для елементів сторінки, які є на кожній сторінці (наприклад, "навбар" або "меню") та класів для всього іншого, але це лише умова, і ви знайдете велику розбіжність у використанні.

Ще одна відмінність полягає в тому, що для елементів введення форми <label>елемент посилається на поле за ідентифікатором, тому вам потрібно використовувати ідентифікатори, якщо ви збираєтесь їх використовувати <label>. є предметом доступності, і ви дійсно повинні ним користуватися.

За минулі роки ідентифікатори також були віддані перевагу, оскільки вони легко доступні у Javascript (getElementById). З появою jQuery та інших фреймворків Javascript це вже майже не проблема.

Заняття - як категорії. Багато елементів HTML можуть належати до класу, а HTML-елемент може мати більше одного класу. Класи використовуються для застосування загальних стилів або стилів, які можна застосувати до декількох елементів HTML.

Ідентифікатори - це ідентифікатори. Вони унікальні; ніхто більше не може мати той самий ідентифікатор. Ідентифікатори використовуються для застосування унікальних стилів до елемента HTML.

Я використовую ідентифікатори та класи таким чином:

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

У цьому прикладі розділи заголовка та вмісту можна стилізувати за допомогою #header та #content. До кожного розділу вмісту можна застосувати загальний стиль через #content .section. Тільки для ударів я додав "спеціальний" клас для середньої секції. Припустимо, ви хотіли, щоб певний розділ мав спеціальний стиль. Цього можна досягти за допомогою .special class, але розділ все ще успадковує загальні стилі від #content .section.

Коли я займаюся розробкою JavaScript або CSS, я зазвичай використовую ідентифікатори для доступу / маніпулювання дуже специфічним HTML-елементом, і я використовую класи для доступу / застосування стилів до широкого кола елементів.

CSS об'єктно-орієнтований. ІД говорить про екземпляр, клас каже клас.

Застосовуючи CSS, застосуйте його до класу та намагайтеся уникати якомога більше ідентифікатора. Ідентифікатор слід використовувати лише в JavaScript для отримання елемента або для прив'язки будь-якої події.

Класи повинні використовуватися для застосування CSS.

Іноді доводиться використовувати класи для прив'язки подій. У таких випадках намагайтеся уникати класів, які використовуються для застосування CSS, і краще додайте нові класи, у яких немає відповідних CSS. Це допоможе, коли вам потрібно змінити CSS для будь-якого класу або змінити назву класу CSS всі разом для будь-якого елемента.

Простір вибору CSS фактично дозволяє використовувати умовний стиль id:

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

відображатиметься, як очікувалося. Навіщо ти це робив? Іноді ідентифікатори генеруються динамічно тощо. Подальше використання використовувалося для відображення заголовків по-різному на основі призначення ідентифікатора високого рівня:

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

Особисто я віддаю перевагу більш довгі селектори класів:

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

як я вважаю, використання вкладених ідентифікаційних документів для диференціювання лікування є дещо збоченим. Тільки знайте, що як розробники у світі Sass / SCSS отримують свої руки, вкладені ідентифікатори стають нормою.

Нарешті, що стосується продуктивності та переваги селектора, ID має тенденцію виграти. Це зовсім інший предмет.

Будь-який елемент може мати клас або ідентифікатор.

Клас використовується для посилання на певний тип дисплея, наприклад, у вас може бути клас css для діва, який представляє відповідь на це питання. Оскільки відповідей буде багато, для кількох дівок знадобиться однакова стилізація, і ви б використовували клас.

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

Технічно ви можете використовувати класи для всього цього або розділити їх логічно. Однак ви не можете повторно використовувати id для кількох елементів.

Клас - це застосування вашого стилю до групи елементів. Стилі ідентифікаторів застосовуються лише до елемента з цим ідентифікатором (має бути лише один). Зазвичай ви використовуєте класи, але якщо є одноразові, ви можете використовувати ідентифікатори (або просто вставити стиль прямо в елемент).

У розширених ідентифікаторах розробки ми в основному можемо використовувати JavaScript.

Для повторюваних цілей клас es стане в нагоді всупереч ідентифікаторам , які повинні бути унікальними.

Нижче наведено приклад, що ілюструє вислови вище:

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

Тепер ви можете побачити тут boxі box1є два (2) різних <div>елемента, але ми можемо застосувати boxі bg-color-redкласи до обох.

Поняття - це успадкування мовою ООП .

1) ідентифікатор div не використовується для повторного використання і повинен застосовуватися лише до одного елемента HTML, тоді як div-клас може бути доданий до декількох елементів.

2) Ідентифікатор має більше значення, якщо обидва застосовані до одного і того ж елемента та мають суперечливі стилі, будуть застосовані стилі ідентифікатора.

3) Елемент стилю завжди посилається на клас div, поставивши a. (крапка) перед їх іменами, тоді як клас id id посилається, поставивши # (хеш) перед їх іменами.

4) Приклад: -

клас у <style>декларації -.red-background { background-color: red; }

ідентифікатор у <style>декларації - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> Тут фон буде синього кольору

idі classє двома глобальними / стандартними атрибутами HTML (Загальні атрибути, наведені нижче, можуть використовуватися для будь-якого елемента HTML).

class Вказує одне або кілька імен класів для елемента (відноситься до класу в таблиці стилів)

id Визначає унікальний ідентифікатор для елемента

Атрибути id дають унікальний ідентифікатор, що відповідає документу, для елемента, де атрибут класу забезпечує спосіб класифікації подібних елементів.

Значення атрибута id має бути унікальним на сторінці HTML, де атрибут класу можна повторно використовувати там, де ви хочете застосувати ті самі властивості

Клас використовується для декількох елементів, які мають загальні атрибути. Наприклад, якщо ви хочете однакового кольору та шрифту для p та тегу body, використовуйте атрибут класу або в самому поділі.

Ідентифікатор з іншого боку використовується для виділення атрибутів одного елемента і використовується виключно для певного елемента. Наприклад, у нас є тег h1 з деякими атрибутами, ми б не хотіли, щоб вони повторювалися в будь-яких інших елементах на всій сторінці.

Слід зазначити, що якщо ми використовуємо клас і id в елементі, * id означає атрибути класу. * Просто тому, що id призначений виключно для одного елемента

Перегляньте нижченаведений приклад

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

Ми генеруємо вихід

Вихідні дані