代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div
id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div>
<script>
var str =
'02E503E2A1C011CFC85B7B701A0677EC0900000000000001'
function bySelector(id)
{
return document.querySelector('#'+id)
}
function byId(id) {
return document.getElementById(id)
}
alert(bySelector(str))
alert(byId(str))
</script>
</body>
</html>
两个函数bySelector，byId分别通过querySelector和getElementById获取元素.
页面上有id为“02E503E2A1C011CFC85B7B701A0677EC0900000000000001”的元素。
结果：所有支持querySelector的浏览器中通过bySelector均获取不到（报错），但通过getElementById却可以获取。
开始怀疑是id的字符串太长的原因导致querySelector获取不到。真正原因却是querySelector按css规范实现，即css标识符也不能以数字开头。
W3 写道
In CSS, identifiers (including element names, classes, and IDs
in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore (_)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 (see next item). For instance, the identifier "B&W?" may be
written as "B\&W\?" or "B\26 W\3F".
下面是 CSS3 新增的 CSS3 属性列表。animation (and eight associated longhand properties)
background-clip
background-origin
background-size
border-radius (and four associated longhand properties)
border-image (and six associated longhand properties)
box-decoration-break
box-shadow
box-sizing
columns (and thirteen associated multi-column properties)
clear-after
flex (and eleven associated flexbox properties)
font-stretch
font-size-adjust
font-synthesis
font-kerning
font-variant-caps
hanging-punctuation
hyphens
icon
image-resolution
image-orientation
line-break
object-fit
object-position
opacity
outline-offset
overflow-wrap / word-wrap
backface-visibility
perspective
perspective-origin
pointer-events (for HTML)
resize
tab-size
text-align-last
text-decoration-line
text-decoration-skip
text-decoration-position
text-decoration-style
text-emphasis (and three associated properties)
text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition (and four associated longhand properties)
word-break
word-spacing
writing-mode
在 CSS3 中为 CSS2.1 新增的取值，下面是每个属性新值的列表。
Value “local” for the background-attachment property
Value "rgba()" for any property that accepts a color value
Value "hsl()" for any property that accepts a color value
Value "hsla()" for any property that accepts a color value
Value "currentColor" for any property that accepts a color value
Value "inset()" for the clip property
Value "linear-gradient()" for any property that accepts an image value
Value "radial-gradient()" for any property that accepts an image value
Value "repeating-linear-gradient()" for any property that accepts an image value
Value "repeating-radial-gradient()" for any property that accepts an image value
Value "image()" for any property that accepts an image value
Multiple comma-separated images for any property that accepts an image value
Multiple comma-separated background-related values to match multiple background image declarations
Value "center" for the position property
Value "page" for the position property
Value "space" for the background-repeat property
Value "round" for the background-repeat property
15 new values for the cursor property
Values "flex" and "inline-flex" for the display property
Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
Multiple, space-separated values for the letter-spacing property
New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
text-decoration is now a shorthand property
Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
Value "full-width" for the text-transform property
rem units for lengths
calc() units for lengths
toggle() units
Angle units (deg, grad, rad, turn)
Time units (s, ms)
下面是 CSS3 中新增的选择器。
Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
:target pseudo-class
New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
:root pseudo-class
New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
The negation pseudo-class :not()
Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
The following-sibling combinator (p ~ img)
::selection pseudo-class (removed from the spec, but everyone uses it)
其它 CSS2.1 没有包含的特性。
@font-face
Media Queries
Keyframe animations using @keyframes
Conditional styles using @supports
Namespacing using @namespace
Regions
Filters
还有部分仍在变化中的。。。
www.cnblogs.com/lhb25/archive/2013/02/21/differences-between-css2-and-css3.html
