Question

<div id="mydiv">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="1">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="2">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="3">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="4">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="5">
<img width="190" height="190" src="http://distilleryimage0.s3.amazonaws.com/9fe1cfd2cd4311e28e5722000a9f195f_6.jpg" id="6">
</div>

<style>
div#mydiv img#1 {width:30px}
div#mydiv img#2 {width:60px}
</style>

为什么样式不起作用？

Js fiddle：http://jsfiddle.net/FqrDR/1/

Answer 1

您可以使用数字启动ID选择器（详细说明Xec的答案），但在CSS中这不是一个好习惯，它需要转义或以字母开头。我建议您在HTML中使用id="img2"这样的名称进行更改。并在css中使用#img2

Answer 2

以数字开头的ID在HTML5中完全有效，但遗憾的是，您不能在css中使用哈希表示法选择它而不转义第一个字符，或者使用属性选择器;

/* unicode 0031 == "1" */
div#mydiv img#\0031 {width:30px} 

/* works, but has less specificity than hash notation */
div#mydiv img[id="2"] {width:60px}

http://jsfiddle.net/FqrDR/3/

为了简化您的选择器，我建议您将该ID命名为以字母字符（a-z）开头。

来源

博客文章：http://mathiasbynens.be/notes/html5-id-class
规格： http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute
W3C常见问题：http://www.w3.org/International/questions/qa-escapes#cssescapes

CSS：样式ID没有任何影响

2 个答案:

来源