Div, если его идентификатор не является номером

Question

Когда я помещаю число как div id или class, изображение, указанное в css, не отображается.

(Но когда я положил письмо, он делает)

мне нужно для DIV id или class, чтобы быть номер (он не может быть буква)

Как я могу это сделать?

<div id="88"></div> 

<style> 
#88 { 
    content: url('http://bithumor.co/144115662788085.gif'); 
    width: 30px; 
    height: 30px; 
    display: inline; 
    z-index: 999999; 
    position: absolute; 
} 

</style> 

Answer 1

Вы не можете использовать число как идентификатор HTML 4. Он должен начинаться с буквы. Могу ли я предложить вам сделать что-то вроде a88, а затем любой код, который вы делаете, просто удаляет a в начале. Если у вас есть более подробная информация о том, что вы пытаетесь сделать, мы можем дать более полезный ответ.

Как только у вас есть действительный идентификатор для вашего doctype, будет отображаться фоновое изображение.

Answer 2

1. Вы не можете использовать Content собственность без псевдо селекторов ::after или ::before. Вместо этого используйте свойство фона.
2. Доступ к элементу с помощью [id='88'] или #\38\38, где \3 просто ускользает от цифр.

#\38\38 { 
 
    background: url('http://placehold.it/300x300'); 
 
    width: 300px; 
 
    height: 300px; 
 
    display: block; 
 
    z-index: 999999; 
 
}

<div id="88">Test</div>

---

Дополнительная информация:

Благодаря @torazaburo за его комментарии.

Если браузер поддерживает HTML5, идентификатор действителен, а браузер не соответствует. Это может быть расщепление волос, но CSS не придерживаться правил HTML об именах. Проблема здесь, то, не то, что HTML-ID является недействительным, то, что CSS является недействительным, если не ускользало

атрибут ID может принимать любую форму, как указано в следующей статье, которая является Рекомендация W3C.

Reference

Там нет других ограничений на то, что образуют идентификатор может принимать; в частности, идентификаторы могут состоять только из цифр, начинаться с цифры, начинают с подчеркиванием, состоят только знаки препинания и т.д.

Answer 3

Другие ответы указывают на проблему с помощью числового идентификатора. Они правильны в теории, но на практике все современные браузеры поддерживают числовые идентификаторы. Так, например, getElementById('88') будет работать.

Проблема заключается не в HTML, а в CSS.CSS имеет понятие Идентификаторы CSS, что равно , а не, идентичное правилам для HTML-идентификаторов. Правило, использующее недопустимый идентификатор CSS в качестве идентификатора (#88), является недопустимым и поэтому игнорируется. Это не, потому что это недопустимый HTML-код; это потому, что это недопустимый идентификатор CSS.

Таким образом, как правильно указал @Manoj Kumar, вы можете обойти эту проблему, избежав идентификатора в форме #\38\38.

Этот же трюк может быть использован в случае имени класса, содержащего двоеточие. Вы можете сказать, что это неверно. Технически это может быть так, но он отлично работает в HTML. Проблема заключается в том, как избежать толстой кишки; в этом случае вы можете сделать это с помощью одной обратной косой черты, как в a\:b.

Другой запутанная вещь о вашем примере, что вы используете content свойство с селектором, который не является либо ::before или ::after псевдо-селектором. Это также «недействительно». Вы должны это исправить. Я бы никоим образом не полагался на это, работая над всеми браузерами. Однако он работает, как оказалось, хотя бы в Chrome (но не в FF, например).

Аналогичным образом недействителен синтаксис значения, которое вы передаете свойству content. Правильные значения включают строки или синтаксис attr(). Поэтому вы также должны это исправить. Это нестандартно. Он работает только случайно. Вместо этого вы должны использовать background-image.