CSS后续

运用<header>,<hgroup>，<nav>,<section>,<article>,<footer>

效果等同与div，但是能更加方便地管理代码。

选择器补充：属性选择器

如 p [ id ^= j ]{

color : cornflowerblue ;

}

/*[id$=e] 属性值以 e 结尾的 */

/*[id*=r] 属性值有 r 的 */

input [ value = abc ]{

color : blue ;

}

tip：

/*:first-child: 选中同级别中的第一个。如果不符合就不生效

1: 同级别的第几个

:first-child 选中同级别中的第一个

:last-child 选中同级别中的最后一个

:nth-child(n) 选中同级别中的第 n 个

:nth-last-child(n) 选中同级别中的倒数第 n 个

:only-child 选中父元素中只有一个子元素的元素

注意点 : 不区分类型

2 ：同类型的第几个

:first-of-type 选中同级别中同类型的第一个

:last-of-type 选中同级别中同类型的最后一个

:nth-of-type(n) 选中同级别中同类型的第 n 个

:nth-last-of-type(n) 选中同级别中同类型的倒数第 n 个

:only-of-type 选中父元素中子元素的类型只有一种的元素

*/

/*选中同级别中的第n个元素 如果元素匹配则生效，否则，不生效。*/

p:nth-child(4){

color: red;

}

/*选择同级别并且同类型的第n个元素 只会查找类型匹配元素中的第n个*/

p:nth-of-type(3){

color: yellow;

}

/*选中同级别中的倒数第n个元素 如果元素匹配则生效，否则，不生效。*/

p:nth-last-child(2){

color: yellow;

}

/*选择同级别并且同类型的倒数第n个元素 只会查找类型匹配元素中的第倒数第n个*/

p:nth-last-of-type(2){

color: yellow;

}

还有：checked伪类，对被选中的目标添加效果

相似的还有enabled以及disabled等

/* 伪类：

first-letter ：一个段落的首字符

first-line ：一个段落的首字符

*/

background-origin : border-box ;

/* 显示的起始位置 */

background-clip : content-box ;

/* 图片剪切的起始位置 */

过渡：（需要注意，不同的浏览器支持的代码也有不同，如不能实现功能，需要根据浏览器的不同添加如-o-、-webkit-、-fox-的前缀）

利用transition进行操作。

/*transform: translate(50px,50px);*/

/* 移动 */

/*transform: scale(2);*/

/* 缩放 */

transform : rotate ( 1120 deg );

/* 旋转 */