CSS新增特性和CSS选择器

CSS3新增特性

CSS3新增属性选择器

属性名称

含义

[att^="value"]

该属性的值以指定的值开始

[att$="value"]

该属性的值以指定的值结束

[att*="value"]

该属性的值包含指定的值，而无论其位置

RGBA透明度

当设置一个RGBA色彩的时候，参数依次设定为红、蓝、绿（可以位0~255或百分数）和通道Alpha（0~1之间），

 

box-shadow和text-shadow定义圆角阴影和块阴影。

border-radius属性无需背景图片就能给HTML元素添加圆角。

border-image属性可以定义设置border的背景图，允许用户在元素的边框上设定图片。

rotate属性可以实现旋转、scale属性实现伸缩，skew属性实现倾斜等效果。

--------------------------------------------------------------------------------------------

CSS选择器

在CSS3中，提倡使用选择器将样式与元素直接绑定起来，这样在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。

CSS2定义了4个属性选择器

E[foo]:选择匹配E的元素，且该元素定义了foo属性；

E[foo="bar"]:选择匹配E的元素，且该元素定义了foo属性值为“bar”；

E[foo~="bar"]:选择匹配E的元素，且该元素定义了foo属性；

E[foo|="en"]:选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以连字符-分割的列表，值开头的字符为en。

CSS3新增的3个属性选择器

E[foo^="bar"]:选择匹配E的元素，且该元素定义了foo属性，foo属性值包含前缀为“bar”的子字符串；

E[foo$="bar"]:选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为“bar”的子字符串；

E[foo*="bar"]:选择匹配E的元素，且该元素定义了foo属性，foo属性包含“bar”的子字符串。

CSS3遵循惯用编码规则，选用^、$和*这3个通用匹配运算符，其中^表示匹配起始符，$表示匹配终止符，*表示匹配任意字符，使用它们更符合编码习惯和惯用编程思维。

UI伪类选择器，这些选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。CSS3共定义了11种UI元素状态伪类选择器，分别是E：hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate和E:selection。

----------------------------------------------------------------------------------------------