HTML5是一个新的网络标准,现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用(RIA)对Flash、Silverlight、JavaFX等的依赖,并且提供更多能有效增强网络应用的API。
HTML5新增的标签有很多,但是好多不常用,在这里我主要介绍常用一点的。
一、通配符选择器
*通配符——通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素
*{margin:0; padding:0;} 表示网页内所有的元素
.demo*{color:red;} 表示demo这个类下方的所有元素。
二、类选择器(.className)
1.类选择器结合元素选择器的使用:
p.nav{background-color: #999;}
2.多类选择器(多类选择器不被IE6支持);如:
.banner.news{color:#000;}
三、后代选择器(E F)
前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,中间用空格隔开。
.demo a{font-size:20px;}
四、子元素选择器(E>F)
子元素选择器E>F,其中F只能是E的子元素,IE6不支持子元素选择器;
ul>li{display: block;}
示例:
五、相邻兄弟元素选择器(E+F)
EF两元素具有相同的父元素,而且F元素在E元素后面,而且相邻,IE6不支持.
1、li + li {background: green;color: yellow; border: 1px solid #ccc;}
2、.active + li {background: green;color: yellow; border: 1px solid #ccc;}
示例:
六、群组选择器
将具有相同样式的元素分组在一起,每个选择器之间使用逗号隔开。
我们来看一下示例:
七、属性选择器
1.E[attr="value"]
指定的属性值
例如:a[id="top"]{color:#aaa;}
2.E[attr$="value"]
选择元素attr属性,并且它的元素值是以value结尾的,常用在网站给pdf,png,doc等不同文件加上不同icon。
例如:a[href$="png"]{font-weight:bolder;}
3.E[attr*="value"]
所选的属性,其属性值中有value的值都将被选中。
例如:a[title*="site"]{color:#ccc;}
八、css的:nth选择器
1. :first-child
2. :last-child
3. :nth-child(n)
4. :nth-last-child(n)
5. :only-child
6. :nth-of-type()
7. :nth-last-of-type()
nth-child(n),其中n是一个简单的表达式,那么"n"取值从“1”开始计算,不能取负值
IE6、7、8和FF3浏览器不支持 nth-child选择器。
九、新增的语义化标签
html5新增的语义化标签有: header 、 footer 、 section 、 main(只能用一次) 、 article