1
2
3
你把这里的span去掉和加上再看效果 就明白了
@ css几种选择器的使用？
1.类选择器（class选择器）
基本使用：
.类选择器{
属性名: 属性值;
…}
2.id选择器
基本使用：
#id选择器{
属性名: 属性值;
…
}
3. html元素选择器
某个html元素{
属性名: 属性值;
…
}
4.通配符选择器
该选择器可以用到所有的html元素，但是其优先权最低
*{
属性名: 属性值;
…
}
@ css3和css一样吗？
CSS3是CSS的子集，CSS3是最新的标准，提供了很多好用的新属性，提升了网页的表现性。
CSS3提供了更好用的选择器
最新的CSS3中，对伪类、伪元素选择器做了严格的规范。有了伪类后，不用在div标签里面添加额外的元素完成一些DOM操作，可以通过::before,::after完成，代码简洁明了。对于鼠标的操作，也可以通过::hover等类似的操作完成。非常高效。还有::first–child等类似的选择器去操作子元素。
CSS3使动画效果越来越方便
css3里面通过animation来完成动画，设置@keyframes即可，一些轻量级的动画不必再通过js完成。
CSS3完成圆角、阴影美化更方便
以前的css完成类似的功能只能通过图片做背景，现在只需要border-radius、boxshadow即可。非常高效简洁。
CSS3提供了全新的盒模型
这个特性十分有用。原来的盒模型width=content.+border+padding。你规定了width.每次都要自己计算，现在有了boder-box不用这么麻烦了。
CSS3的flex布局是最强大的
IE已死，不需要再考虑它的兼容性！！！用flex布局，节省很多时间，节省的时间可以学很多东西，而不是浪费时间去适应落后的ie！！！
还有很多好用的css3特性，这个版本提供了巨大的生产力！！！很感谢它，期待下一个grid布局～
以上是偶的看法～
@ css3中伪类选择器由什么组成？
w3c规范中伪类有：
active、hover、link、visited 【css1】
所有主流浏览器都支持以上伪类，但是只在对标签上的支持最好。
【css2】的有3个
focus ： 如果规定了<!doctype>，将在主流浏览器&ie8+中支持(否则ie不支持)
first-child：必须声明<!doctype>才能够确保在ie中正常支持
lang：如果规定了<!doctype>，将在主流浏览器&ie8+中支持(否则ie不支持)
