CSS初始化代码示例，HTML5新特性，新增input类型，新增表单属性，CSS3新特性，属性选择器和结构伪类选择器285

CSS初始化

京东初始化代码

*{
     margin:0;padding:0}
em,i{
     font-style:normal}
li{
     list-style:none}
img{
     border:0;vertical-align:middle}
button{
     cursor:pointer}
a{
     color:#666;text-decoration:none}
a:hover{
     color:#c81623}button,input{
     font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}
body{
     -webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;color:#666}.hide,.none{
     display:none}
/* 清除浮动 */
.clearfix:after{
     visibility:hidden;clear:both;display:block;content:".";height:0}
.clearfix{
     *zoom:1}

HTML5新特性

1.语义化标签

2.多媒体标签

语法：

 <video src="media/mi.mp4" width="800px" autoplay="autoplay" muted="muted" poster="media/mi9.jpg" loop="loop"></video>

语法（与video类似）：

HTML5新增input类型

HTML5新增表单属性

CSS3新特性

1.属性选择器
类选择器和伪类选择器权重为10

（1）属性只有一种元素

        input[value]{
     
            color: blue;
        }

（2）根据属性值选择元素

        input[type=text]{
     
            color: yellow;
        }

（3）选择以val开头的属性,用^

        input[name^=na]{
     
            color: yellow;
        }

（4）选择以val结尾的属性，用$

 input[name$=me]{
     
            color: yellow;
        }

（4）选择以其中含有val的属性，用*

        input[name*=am]{
     
            color: yellow;
        }

2.结构伪类选择器

(1)选择第一个元素，用first-child

        ul li:first-child{
     
            background-color: pink;
        }

（2）选择最后一个元素，用last-child

        ul li:last-child{
     
            background-color: yellow;
        }

（3）选择第k个元素，用nth-child（k）

        ul li:nth-child(3){
     
            background-color: blue;
        }

1）如果nth-child（n）是n，则代表选择了所有元素
2）如果nth-child（n）是2n，则代表选择了偶数类
3）如果nth-child（n）是2n+1，则代表选择了奇数类
4）如果nth-child（n）是5n，则代表选择了5的倍数类

nth-child与nth-of-type区别：