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

您可以设置属性类来解决此问题：

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

这会设置包含1200-m

的每个类的样式

示例：http://jsfiddle.net/o9re6vf1/

Answer 2

您可以使用用户定义的HTML5数据属性

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

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

Answer 3

在HTML5中，CSS类名可以包含任何字符（并以其开头）。但是，为了在CSS文件（或JavaScript函数）you need to escape them中定位奇特的CSS类名。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您也可以使用CSS2 [att~=val] selector。

如何定位以digit开头的CSS类名

3 个答案: