css3部分注意事项

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

 1、选择器

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = "external"]）
9. 伪类选择器（a: hover, li:nth-child）

2、优先级为:

!important > id > class > tag

important 比 内联优先级高,但内联比 id 要高

3、CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

 

4、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），

旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询@media，多栏布局 border-image

CSS3中新增了一种盒模型计算方式： box-sizing 。盒模型默认的值是 content-box , 新增的值是 padding-box 和 border-box ，几种盒模型计算元素宽高的区别如下：

 content-box（默认）

布局所占宽度Width：Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height: Height = height + padding-top + padding-bottom + border-top + border-bottom

 padding-box

布局所占宽度Width：Width = width(包含padding-left + padding-right) + border-top + border-bottom

 布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

 布局所占宽度Width：Width = width(包含padding-left + padding-right + border-left + border-right)

 布局所占高度Height: Height = height(包含padding-top + padding-bottom + border-top + border-bottom)