CSS中伪类和伪元素的基本使用

开心章鱼

已于 2023-04-05 21:00:59 修改

阅读量2.5k

点赞数 7

文章标签： css html5 前端 css3

于 2022-04-19 21:24:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53483088/article/details/124269417

版权

伪类：伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰，是元素的特殊状态：悬浮点击...

伪类特点：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

常见的伪类有：:hover，:active，:visited，:link

：hover 表示当鼠标悬浮时

// 在a标签选择器后边加上  ：hover  表示当鼠标悬浮在a 标签上时执行 {} 内css样式，a标签内容变为红色 
<style>
       a:hover{
          color: red;
         }
</style>


<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

: active 表示激活状态

// 在a标签选择器后边加上  ：active  表示当a标签激活时，执行 {} 内css样式，a标签内容变为红色 
<style>
       a:active{
          color: red;
         }
</style>


<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

:visited 表示访问过后的状态

// 在a标签选择器后边加上  ：visited  表示当a标签被访问过后的状态，执行 {} 内css样式，a标签内容变为红色 
<style>
       a:active{
          color: red;
         }
</style>


<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

：link 表示未访问的状态

// 在a标签选择器后边加上  ：link 表示当a标签未被访问的状态，执行 {} 内css样式，a标签内容为红色 
<style>
       a:active{
          color: red;
         }
</style>

<body>
    <a href="http://www.baidu.com">百度一下</a>
</body>

伪元素：

元素的特殊位置，可以在开始位置、最后位置、第一行，伪元素的前缀是两个冒号 ( :: ) ，同样是添加到选择器后面去选择某个元素的某个部分。伪元素创建了不存在 DOM 树中的元素，并为其添加样式。例如，::after 选择元素后，在其内容后使用 content 添加内容。虽然可以看到添加的内容，但是这些内容实际上不存在 DOM 树中。

伪元素特点：伪元素也是元素，所以可以为它添加大部分其他元素具有的属性，比如定位属性，字体属性，背景属性和盒模型的属性等。另外由于伪元素默认是内联元素，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。

它可以用于

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

常见的伪元素有：

选择器	例子	作用
::after	p::after	在p元素最后位置加入内容
::before	p::before	在p元素开始位置加入内容
::first-line	p::first-line	选择p元素的首行
::first-letter	p::first-letter	选择p元素的第一个字

注意：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

伪元素代码实例：

注意：在元素的 ::before和 ::after中插入内容 content属性（如果没有写content样式，伪元素会失效）

::after 在box盒子最后位置添加伪元素,颜色为红色

.box::after{
      content: "";
       color: red;
  }

::before 在box盒子开始位置加入伪元素，颜色为蓝色，字体为13像素。

  .box::before{
      content: "";
      color: blue;
      font-size: 13px;
  }

::first-line 为box盒子中的内容首行添加样式，颜色为粉色，字体为13像素。

  .box::first-line{
      background-color: pink;
      font-size:13px;
  }

::first-letter 为box盒子中内容的第一个字添加样式，颜色为绿色，字体为13像素。

  .box::first-letter{
      color: green;
      font-size: 13px;
  }