2024年3月7日发(作者：)

育知同创官网：

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

我们大家是不是对网页有了初步的了解了，我们CSS3还提供一新的选择器，为我们在写页面时提供了更方便的服务。我们一起来看一下吧！

一、 CSS3新增选择器

1. 伪对象选择器： ：before、：after或 ::before、::after

CSS3新增选择器

选择器

：before

：after

描述

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。

CSS3将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选备注

择符，但以前的写法仍然有效。

即E:before可转化为E::before

伪对象选择器应用（：before和：after的使用几乎是一样）

1) 插入内容

2) 制定个别元素不进行插入

3) 插入图像文件

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

使用选择器插入内容

案例一代码：

显示效果

育知同创官网：

案例二代码：

插入图片文件

插入图片文件

插入图片文件

插入图片文件

插入图片文件

插入图片文件

插入图片文件

显示效果：

案例三：万能清除浮动的方法

育知同创官网：

大家都知道我们在讲浮动的时候，使用浮动会产生副作用:导致父元素的高度塌陷，后面的元素占了浮动元素的空间。

代码：

显示效果：

育知同创官网：

代码：

显示效果：

height: 200px;

background: pink;

float: right;

}

.box3{

width: 800px;

height: 200px;

background: green;

margin: 0 auto;

}

大家看到两个效果图的对比，第一个图没有加浮动时父元素是自动撑开的，第二个图父元素box的红颜色没有显示出来，也就是说父元素的高度塌陷了，并且对box3也产生了影响。Box3占用了前面浮动元素的空间了，遇到这样的问题应该怎么解决呢？

有这样几种解决方案，我们一起来看一下。

1.1 方法一：对父级设置适合CSS高度

育知同创官网：

➢ 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

➢ 优点：简单，代码少，容易掌握

➢ 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

➢ 建议：不推荐使用，只建议高度固定的布局时使用

代码：

}

clear: both;

显示效果：

1.2 方法二：结尾处加空div标签 clear:both

➢ 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

➢ 优点：简单，代码少，浏览器支持好，不容易出现怪问题

➢ 缺点：不少初学者不理解原理；如果页面浮动布局多，就

育知同创官网：

代码：

育知同创官网：

显示效果：

1.3 父级div定义 overflow:hidden

➢ 原理：因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。【注意：必须定义width或zoom:1，同时不能定义height】

代码：

育知同创官网：

显示效果：

育知同创官网：

1.4 方法四：父级div定义 伪类:after

➢ 原理：IE8以上和非IE浏览器才支持:after。 zoom(IE转有属性)可解决ie6,ie7浮动问题。

➢ 优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

➢ 缺点：代码多，不少初学者不理解原理，要两句代码结代码：

育知同创官网：

显示效果：