前端开发培训技术分享 CSS3新增选择器(上).doc

前端开发培训技术分享 CSS3新增选择器(上) 我们大家是不是对网页有了初步的了解了，我们CSS3还提供一新的选择器，为我们在写页面时提供了更方便的服务。我们一起来看一下吧！ CSS3新增选择器 伪对象选择器： ：before、：after或 ::before、::after CSS3新增选择器 选择器 描述 ：before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。 ：after 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。 备注 CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。 即E:before可转化为E::before 插入内容 制定个别元素不进行插入 插入图像文件 !DOCTYPE html html head lang=en meta charset=UTF-8 title使用选择器插入内容/title style h2:before { content: Title; color: #fff; background: green; padding: 1px 5px; margin-right: 10px; } h2.nocontent:before { content: none; } /style /head body h1使用选择器插入内容/h1 h2使用选择器插入内容/h2 h2使用选择器插入内容/h2 h2使用选择器插入内容/h2 h2 class=nocontent使用选择器插入内容/h2 h2使用选择器插入内容/h2 h2使用选择器插入内容/h2 h2使用选择器插入内容/h2 /body /html 案例一代码： 显示效果 案例二代码： !DOCTYPE html html head lang=en meta charset=UTF-8 title插入图片文件/title style h2.hot:after { content: url(hot.gif); } h2.digest:after { content: url(digest.gif); } h2.xinren:after { content: url(xinren.gif); } /style /head body h1插入图片文件/h1 h2 class=hot插入图片文件/h2 h2 class=digest插入图片文件/h2 h2 class=hot插入图片文件/h2 h2 class=hot插入图片文件/h2 h2 class=xinren插入图片文件/h2 h2插入图片文件/h2 /body /html 案例三：万能清除浮动的方法 大家都知道我们在讲浮动的时候，使用浮动会产生副作用:导致父元素的高度塌陷，后面的元素占了浮动元素的空间。 代码： !DOCTYPE html html head meta charset=utf-8 title/title style type=text/css .box{ width: 800px; background: red; margin: 0 auto; } .box1{ width: 300px; height: 200px; background: yellow; /*float: left;*/ } .box2{ width: 400px; height: 200px; background: pink; /*float: right;*/ } .box3{ width: 800px; height: 200px; background: green; margin: 0 auto; } /style /head body div class=box div class=box1left/div div class=box2right/div