css伪元素与清除浮动的几种方式

最新推荐文章于 2024-07-18 14:18:51 发布

coderWWH

最新推荐文章于 2024-07-18 14:18:51 发布

阅读量1.2k

点赞数

分类专栏： Html 与 Css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44215654/article/details/118927612

版权

Html 与 Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的伪元素和伪类，包括它们的区别和使用场景。伪元素如:before和:after用于在元素内部添加内容，常用于清除浮动、创建分隔线等。伪类如:hover和:active则根据元素状态改变样式。文章通过实例展示了如何使用伪元素清除浮动，以及创建分割线。同时，伪元素和伪类在不修改HTML结构的情况下增强了CSS的样式控制能力。

摘要由CSDN通过智能技术生成

本文参考链接：

https://www.cnblogs.com/wonyun/p/5807191.html

https://blog.csdn.net/m0_37686205/article/details/88396191

https://blog.csdn.net/h_qingyi/article/details/81269667

第一次了解到伪元素是使用清除浮动时，然而现在有flex，grid都差不多不用浮动做定位了，但是对伪元素还是一知半解

伪元素是什么？

伪元素不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为。

伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。

状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
:link 应用于未被访问过的链接；
:hover 应用于鼠标悬停到的元素；
:active 应用于被激活的元素；
:visited 应用于被访问过的链接，与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。

伪元素有:before，:after，:first-line，:first-letter等，重点和常见的是:before和:after

这个两个伪元素在真正页面元素内部之前和之后添加新内容

<p>伪元素</p>
<style>
   p:before{content: "hello "}
   p:after{content: "you are handsome!"}
</style>

<!-- 等价于 -->

<p>
   <span>hello </span>
   伪元素
   <span> you are handsome!</span>
</p>

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

为什么用伪元素？

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

怎么用伪元素？

1.清除浮动？

什么是浮动？

当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线

为什么清除浮动？

答：如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。

怎么清除浮动？

代码1

.clear::after {
    content: '';
    display: block;
    clear: both;
}

代码2

<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";
   display: block;
   height: 0;
   clear:both;
   visibility: hidden;
}
.clearfix{
   *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

代码3

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

2.画分割线

效果如下：

代码如下：

<style>
    * {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="spliter">分割线</p>
</body>

3.计数器（这个没懂）

coderWWH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css伪元素与清除浮动的几种方式

本文参考链接：https://www.cnblogs.com/wonyun/p/5807191.htmlhttps://blog.csdn.net/m0_37686205/article/details/88396191https://blog.csdn.net/h_qingyi/article/details/81269667第一次了解到伪元素是使用清除浮动时，然而现在有flex，grid都差不多不用浮动做定位了，但是对伪元素还是一知半解伪元素是什么？伪元素不是真正的页面元素，.
复制链接

扫一扫

专栏目录