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(1120deg);

/*旋转*/