最全的 CSS2.1 和 CSS3+ 的区别一览

html-css07

最全的 CSS2.1 和 CSS3+ 的区别一览,第1张

下面是 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

这是sina同事xiaoniu发现的,如下

代码如下:

<!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".