Как назначить имена классов CSS, начинающиеся с цифры

Question

У меня есть класс списка, в котором я хочу применить верхний край, но, похоже, синтаксис недействителен с CSS. Я не думаю, что ему нравится раздел 1200mm-x-4700mm.

Я не могу переименовать класс списка, поскольку он автоматически генерируется. Есть ли способ обойти это, чтобы я мог применить стиль CSS?

<li class="max-panel-size 1200mm-x-4700mm">...</li> 

li.max-panel-size.1200mm-x-4700mm { 
    margin-top: 20px; 
} 

Answer 1

В HTML5 имена классов CSS могут содержать (и начинаться с) практически любые символы. Тем не менее, для того, чтобы указывать имена стилизованных CSS-классов внутри файлов CSS (или функций JavaScript) you need to escape them.

li.max-panel-size.\31 200mm-x-4700mm { 
 
    background: #F00; 
 
} 
 
li.max-panel-size.\31 111mm-x-1111mm { 
 
    background: #0F0; 
 
} 
 
li.max-panel-size.\39 999mm-x-9999mm { 
 
    background: #00F; 
 
}

<ul> 
 
    <li class="max-panel-size 1200mm-x-4700mm">Test 1</li> 
 
    <li class="max-panel-size 1111mm-x-1111mm">Test 2</li> 
 
    <li class="max-panel-size 9999mm-x-9999mm">Test 3</li> 
 
</ul>

Вы можете использовать CSS2 [att~=val] selector, а также.

Answer 2

Вы можете установить класс атрибута, чтобы решить эту проблему:

[class*="1200mm-"] { 
    margin-top: 20px; 
} 

Это стиль каждого класса, которые содержат 1200-m

Пример: http://jsfiddle.net/o9re6vf1/

Answer 3

Вы можете пользовательские атрибуты данных HTML5

<li class="max-panel-size" data-margin="1200mm-x-4700mm"> 

li[data-margin="1200mm-x-4700mm"]{ 
    margin-top: 20px; 
} 

Answer 4

Селектор CSS и селектор идентификаторов, начиная с номера, недействительны.

• Characters and case

Но все-таки вы можете работать вокруг этого. Существует два способа для достижения этой цели

Первый attribute селектор:

/* attribute selector */ 
[class="12px"] { 
    font-size: 12px; 
} 

Другой является unicode селектор:

/* or unicode selector */ 
.\31 00px { 
    font-size: 100px; 
} 

/* attribute selector */ 
 
[class="12px"] { 
 
    font-size: 12px; 
 
} 
 

 
/* or unicode selector */ 
 
.\31 00px { 
 
    font-size: 100px; 
 
}

<p class="12px"> Hello, world. </p> 
 
<p class="100px"> Hello, world. </p>

Примечание. Если вы собираетесь использовать маршрут выбора атрибутов, имейте в виду, что он работает только до IE7. Если вам нужно поддерживать более старые браузеры, чем у вас есть мои симпатии (вы все равно можете использовать селектора unicode).