Какой атрибут тега <div>должен ссылаться на CSS?

Question

Это, вероятно, случай попытки запуска, прежде чем я смогу ходить, однако ... У меня есть следующий код:

<div class="hidden" id="repair_complete">
  // some code
</div>

У меня сложилось впечатление, что если мой CSS-файл содержит:

#hidden {
 display: none;
}

... тогда содержимое div не будет отображаться. Тем не менее, похоже, что это поведение будет работать только в том случае, если файл CSS содержит ссылку на идентификатор div:

#repair_complete {
  display: none;
}

В книге, над которой я работаю, все наоборот: таблица стилей относится к имени класса, а не к идентификатору.

Есть идеи, где я ошибаюсь?!

Answer 1

Ваш синтаксис CSS неверен.

Если вы хотите получить доступ к этому div, вы можете сделать это следующим образом:

/* By class: */
.hidden {
  display: none;
}

/* By ID: */
#repair_complete {
  display: none;
}

Обратите внимание, что для доступа к элементу по классу вы используете точку перед именем класса. Вы используете хеш перед идентификатором.

Answer 2

Остальные ответы имеют право на технические вещи: вам нужно. Скрыто, а не # скрыто.

Теперь вам нужно решить, хотите ли вы присоединить CSS к элементам div по классу или идентификатору. Я считаю, что в конечном итоге занятия лучше, если только вы не уверены, что когда-либо действительно и действительно будет что-то, что вы делаете.

Также не забывайте, что вы можете прикрепить к элементу более одного класса:

<div class="red fat shallow">blah blah</div>

Затем вы можете стилизовать этот элемент с помощью любого из следующих селекторов:

.red {...}
.fat {...}
.shallow {...}
.red.fat {...} /* Applies only to things that are both red and fat */
.red.fat.shallow {...} /* Very specific */
/* etc. */

Answer 3

A "." перед именем будет ссылаться на классы, а "#" будет ссылаться на идентификаторы:

.hidden
{
    display: none;
}

Answer 4

Для ссылки на идентификатор элемента вы используете селектор #, для ссылки на имя его класса вы используете селектор ..

Так что в вашем примере вы бы использовали

#repair_complete {
display:none;
}

или

.hidden {
display:none;
}

Answer 5

Чтобы использовать имя класса, используйте точку.

т.е.

.hidden refers to the class name
#repair_complete refers to the id.

Answer 6

Вам нужно:

.hidden{
   display:none;
}

точка - это спецификатор класса, знак фунта - для идентификаторов.