HTML ID with numerical value not recognized by CSS
Here is the div:
<div class='something' id='1'>
I got 9 of them with different positions on page so in the .css file I do:
div#1.something {
code...
}
And the thing is that it won't work, I know this is the proper selector but I have also tried div.something#1 and it also doesn't work, as expected. I think there is something wrong with ID as a number, should I change it or there is a way?
Although it's allowed to set a class or id to begin with a digit in HTML5, but it's not allowed in CSS, see the spec:
HTML5: 3.2.5.1 The id attribute
... There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit , start with an underscore, consist of just punctuation, etc. ...
CSS: 4.1.3 Characters and case
... they cannot start with a digit , two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code ...
ie
<div id="1"> is valid HTML, but you cannot target it with #1 {...} in CSS.
However, you can use [id="1"] {...} or escape it #31 {...}
Please try this:
You can call either by class or ID.
div.something {
code...
}
or
div#1 {
code...
}
Change id="1" to id="one" since you cannot use numbers in CSS to select an id or class. Then just use div#one { // CSS Here } since you don't really need to include the class. After all you can only have one id with a specific name per page.
上一篇: HTML5元素ID与名称属性
下一篇: 数值无法被CSS识别的HTML ID