0
<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小提琴:http: //jsfiddle.net/FqrDR/1/

4

2 回答 2

2

您可以用数字开始 ID 选择器(要详细说明,请查看 Xec 的答案),但在 CSS 中它不是一个好的做法,它需要转义或以字母开头。我建议您将其更改id="img2"为 HTML 中的名称。并#img2在 css 中使用

于 2013-06-07T11:17:11.990 回答
1

以数字开头的 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/

为了使您的选择器更简单,我建议您以字母字符 (az) 开头的 ID 命名。

来源

  1. 博客文章:http: //mathiasbynens.be/notes/html5-id-class
  2. 规范: http: //www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute
  3. W3C 常见问题解答:http ://www.w3.org/International/questions/qa-escapes#cssescapes
于 2013-06-07T11:25:55.127 回答