ID против КЛАССА в CSS. Пожалуйста, объясните подробно с примером - PullRequest
Новая
       23

ID против КЛАССА в CSS. Пожалуйста, объясните подробно с примером

0 голосов
/ 26 июля 2011

Я слышал, что идентификатор уникален и может использоваться только один раз на странице, но он отлично работает при многократном использовании на странице.Пожалуйста, дайте мне знать цель ID и чем он отличается от классов?

@ ФАЙЛ HTML 

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <LINK href="special.css" rel="stylesheet" type="text/css">
   <title>Untitled Document</title>
   </head>

    <body>
    <div class="layout">
    <div class="left_box">
    <div id="color"></div>
   </div>

   <div class="right_box">
    <div id="color"></div>
    </div>
     </div>
   </body>
   </html>

@ ФАЙЛ CSS 

      @charset "utf-8";
     /* CSS Document */
     .layout {
 width:600px;
  height:600px;
  background-color:#666;
  margin:0 auto;
      }

     .left_box {
  width:300px;
  height:600px;
  float:left;
        }

    .right_box {
 width:300px;
 height:600px;
 float:right;
    }

    #color {
background-color:#CCC;
height:600px;
    }

Ответы [ 8 ]

4 голосов
/ 26 июля 2011

Я слышал, что идентификатор уникален и может использоваться только один раз на странице

Это правило HTML, которое не имеет ничего общего с CSS.

, но работает нормально при многократном использовании на странице.

Браузеры выполняют восстановление после ошибок.Не зависите от этого, так как не все браузеры будут восстанавливаться после всех ошибок одинаково.Напишите допустимая разметка.

Пожалуйста, дайте мне знать назначение идентификатора и чем он точно отличается от классов?

В терминах HTML - идентификаторуникален для каждого документа и может быть целью ссылки.Класс можно использовать повторно.

В терминах CSS - селектор идентификатора имеет более высокую специфичность , чем селектор класса.

2 голосов
/ 26 июля 2011

Вы правильно слышали. Поведение, которое вы видите, является результатом того, что браузеры закодированы, чтобы быть чрезвычайно приспособленными перед лицом грубых нарушений стандарта HTML.

Идея, лежащая в основе того факта, что они были закодированы для работы даже при представлении «плохих» данных, заключается в том, что для менее технически опытных пользователей это ошибка браузера , если что-то не работает. Браузеры были вынуждены работать с теговым супом , и это логическое расширение.

1 голос
/ 26 июля 2011

Если я могу использовать аналогию автомобилей:

ID is like a Registration Plate

  • должен быть уникальным - позволяет уникально идентифицировать и стилизовать отдельный элемент

Class is like a Vehicle Model

  • позволяет вам разобраться с набором связанных элементов за один раз.

Продолжаем анаологию:

Хорошо дублировать регистрационные номера, если машины все еще работают, но полиция очень рассердится! Как бы вы определили, что конкретный водитель ускоряется?

То же самое относится и к элементам HTML - повторное использование одного и того же идентификатора просто останавливает идентификацию одного элемента, когда это необходимо.

0 голосов
/ 26 июля 2011

Путаницы здесь предостаточно.Оказывается, все правы.Вот факты: 

 1. CSS doesn't care much which you use, as far as actually applying
    styling. ID's are technically faster for a browser rendering engine,
    but other than the most extreme of circumstances you'll probably
    never notice a speed difference
 2. . JavaScript cares very much about ID's. It can be noticeably faster
    for JavaScript to find an element by an ID. And this is where the
    "uniqueness" is very important. JavaScript will only find the
    "first" element with that ID, so if you have multiple on the page,
    confusion may ensue.
 3. ID's have an infinitely higher specificity value than classes. If
    there is an element with an ID and a class and they both apply
    styles, the styles applied by the ID will take precedence over the
    styles applied by the class. This can be useful, this can be a
    hindrance.

вот самый простой пример 

#id    { color: red; }
.class { color: green; }

Это просто атрибут, и это, казалось бы, произвольная разница в синтаксисе в зависимости от того, какой вы используете.Результаты предсказуемы: 

<div id="id">Would be red</div>
<span id="id">Would be red</div>

<div class="class">Would be green</div>
<span class="class">Would be green</div>

ССЫЛКА

0 голосов
/ 26 июля 2011

В терминах CSS, идентификаторы быстрее найти, чем классы.

Вы должны использовать классы для вещей, которые должны быть использованы повторно.

EG: 

@CSS

.displayNone
{
    display:none;
}
0 голосов
/ 26 июля 2011

Если вам нужна проверка XHTML / HTML, вам следует использовать уникальные идентификаторы.

См. Это:

Класс против идентификатора

И

Почему атрибут ID должен быть уникальным на каждой странице?

Надеюсь, это поможет.

0 голосов
/ 26 июля 2011

Идентификатор используется для ссылки на определенные элементы при использовании JQuery / Javascript и т. Д., Поэтому технически, если вы хотите использовать эти функции, идентификаторы на вашей странице должны быть уникальными.

Если вас беспокоит только стиль, то это не такая уж большая проблема, хотя это недопустимая практика.

0 голосов
/ 26 июля 2011

Использование одного и того же идентификатора для нескольких элементов делает ваш HTML недействительным.

Простой ответ - это просто.Если вы используете идентификатор (уникальный идентификатор) несколько раз, вы лишаете законной силы свой HTML.

Точно так же, как жевательная резинка может использоваться для прикрепления рисунка к стене, тот же идентификатор может использоваться несколько раз, потому что HTML не обрабатывает ошибки драконовским образом.Это все еще не делает его правильным или даже хорошим использованием атрибута.

Классы разработаны так, что вы можете связать несколько элементов на странице.Вот для чего он предназначен.

...