CSS伪类和伪元素的使用

CSS伪类和伪元素的使用

伪类

伪类： 一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法 将伪类添加到CSS选择器，:如下所示：a:hover{ … } 。

属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
:nth-child(2n) 向元素的偶数元素添加样式

a标记的伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      /* 超链接为访问时的状态 */
      a:link{
        color: red;
        text-decoration: none;
      }
      a{
        font-size: 300px;
      }
      /* 设置超链接访问过的网址状态 */
      a:visited{
        color: black;
        
      }
      /*设置超链接鼠标悬停时候的样式 */
      a:hover{
        text-shadow: 5px 5px 5px #FF0000;
      }
      /* 设置超链接单机未释放时候的样子 */
      a:active{
        color: lawngreen;
      }
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">百度一下</a>
  </body>
</html>

伪元素

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

属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。 2

用于文本的

:first-line 伪元素

可以通过这个属性设置文本第一行的特殊效果，比如一段文字的第一行为红色，其他为黑色。

如果不通过这个方式来实现，就比较麻烦。因为屏幕适配的原因，你可能不能确定哪些文字属于第一行

:first-letter 伪元素

和first-line 相似，这个只是设置第一个字符的特殊效果。比如第一个字的字体比别的大

如果不通过这个方式实现，那么就可能还要处理对齐，这种实现方式更方便

:before 和 :after伪元素使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<title>伪类</title>
<style type="text/css">
  p{
    width: fit-content;    /* p标签的宽度随着文字内容长短而变化 */
  }
  p::before{
    content: '';		/* 内容为空 */
    height: 3px;
    background-color: yellow;
    display: block;
  }
  p::after{
    content: '';
    height: 3px;
    background-color: red;
    display: block;
  }
</style>
</head>

<body>

  <p>文本文字</p>

</body>
</html>