如何指定以数字开头的CSS类名 [英] How to target CSS class names that start with digit

问题描述

我有一个列表类，我想应用顶部边距 - 但它似乎语法无效的CSS。我不认为它喜欢 1200mm-x-4700mm 部分。

我不能重命名列表类它会自动生成。是否有任何方法允许我应用CSS样式？

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

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

解决方案

可以包含（和开始）任何字符。但是，为了在CSS文件（或JavaScript函数）中定位奇特的CSS类名称，请 <

  li.max-panel-size.\31 200mm- x-4700mm {background：＃F00;} li.max-panel-size.\31 111mm-x-1111mm {background：＃0F0;} li.max-panel-size.\39999mm-x-9999mm { background：＃00F;}  

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

div>

您可以使用 CSS2 [att〜= val] 选择器。

I have a list class that I want apply a top margin to - but it seems like the syntax is invalid with CSS. I don't think it likes the 1200mm-x-4700mm section.

I cannot rename the list class as it is automatically generated. Is there any way around this to allow me to apply the CSS styling?

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

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

解决方案

In HTML5, CSS class names can contain (and start with) just about any character. However, in order to target fancy CSS class names inside CSS files (or JavaScript functions) 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>

You could use the CSS2 [att~=val] selector as well.

这篇关于如何指定以数字开头的CSS类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！