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 のような名前に変更することをお勧めします。#img2cssでも使用します

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

セレクターをよりシンプルにするために、ID の名前を英字 (az) で始めることをお勧めします。

ソース

  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 FAQ: http://www.w3.org/International/questions/qa-escapes#cssescapes
于 2013-06-07T11:25:55.127 に答える