伪元素和伪类的区别和作用？

最新推荐文章于 2024-07-11 21:11:19 发布

heiyay

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量458

点赞数 1

文章标签：伪元素伪类

本文链接：https://blog.csdn.net/study_way/article/details/133829341

版权

什么是伪元素和伪类

伪元素
伪元素（pseudo-elements）是CSS中的一种选择器，用于选择元素的特定部分而不是整个元素本身。伪元素允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪元素的语法以::（双冒号）作为前缀，如::before和::after。

以下是一些常见的伪元素及其主要作用：

::before：用于在所选元素的内容之前插入生成的内容。这通常用于在元素前面添加一些装饰性的内容，比如图标或文本。
::after：用于在所选元素的内容之后插入生成的内容。类似于::before，它也经常用于添加额外的装饰性元素。
::first-line：用于选择所选元素的第一行文本。你可以使用它来为文本的第一行应用特定的样式。
::first-letter：用于选择所选元素的第一个字母或字符。通常用于创建首字母大写或特殊的样式。
::selection：用于选择用户选择的文本部分（鼠标拖选时）。你可以使用它来自定义选中文本的样式。

伪类
伪类（pseudo-class）是CSS中的一种选择器，用于选择HTML元素的特定状态或关系，而不是选择元素本身。伪类可以根据用户交互、元素的位置、链接状态等条件来选择元素，从而允许你应用不同的样式或行为。伪类的语法以:（单冒号）作为前缀，如:hover和:first-child。

以下是一些常见的伪类及其主要作用：

:hover：用于选择用户鼠标悬停在元素上时的状态。通常用于创建悬停效果，如改变链接的颜色或显示工具提示。
:active：用于选择用户点击元素时的状态。通常用于创建点击效果，如按钮按下时的变化。
:focus：用于选择元素获得焦点时的状态，通常用于表单元素，如文本框或按钮，以突出显示当前激活的元素。
:first-child：选择父元素的第一个子元素。这可用于设置第一个子元素的特定样式。
:nth-child(n)：选择父元素的第n个子元素。你可以使用这个伪类来选择元素列表中的某个特定元素。
:not(selector)：选择不匹配给定选择器的元素。这允许你排除某些元素以应用样式。
:visited：选择已访问的链接元素，通常用于改变已访问链接的样式。

总结： 伪元素创建了抽象元素，而伪类代表了元素的特殊状态。注意语法上的区别,伪元素使用:: 伪类使用:

使用场景

1、:hover鼠标悬停

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .parent {
        padding: 30px;
      }
      .child:hover {
        cursor: pointer;
        color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">一段文字</div>
    </div>
  </body>
</html>

当鼠标悬停文字颜色就变了。
在这里插入图片描述
2、:active 鼠标按下的状态

.child:active {
  cursor: pointer;
  color: red;
 }

在这里插入图片描述
3、:focus激活状态的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .input {
            width: 200px;
            padding: 10px;
            border: 2px solid #ccc;
        }

        .input:focus {
            border-color: blue;
            outline: none; /* 可选，用于去除默认的焦点边框 */
        }
    </style>
</head>
<body>
    <label for="example">输入框:</label>
    <input type="text" id="example" class="input">
</body>
</html>

激活后：
在这里插入图片描述
4、:first-child :nth-child(n)。类似还有:first-of-type。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      ul li:nth-child(2) {
        background-color: yellow;
      }
      ul li:first-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>第一个子元素</li>
      <li>第二个子元素</li>
      <li>第三个子元素</li>
    </ul>
  </body>
</html>

在这里插入图片描述

5、:not(selector) 伪类用于选择不匹配指定选择器的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p:not(.special) {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is a normal paragraph.</p>
    <p class="special">This is a special paragraph.</p>
    <p>This is another normal paragraph.</p>
</body>
</html>

在这里插入图片描述
6、::before

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .custom-button::before {
        content: "\2713"; /* Unicode字符 ✓ 代表勾号 */
        margin-right: 5px; /* 添加一些间距 */
        color: green; /* 颜色为绿色 */
      }

      .custom-button {
        background-color: lightblue;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button class="custom-button">点击这里</button>
  </body>
</html>

在这个示例中，定义了一个 .custom-button 类，并使用 ::before 伪元素在按钮文本前插入一个勾号图标。通过设置 content 属性为 “\2713”（Unicode字符 ✓）。
在这里插入图片描述
7、::after

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .quote::after {
        content: "\201D"; /* Unicode字符 ” 代表右双引号 */
        color: #999;
      }

      .quote {
        font-size: 18px;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p class="quote">这是一段带有引用的文本。</p>
  </body>
</html>

在这个示例中，定义了一个 .quote 类，并使用 ::after 伪元素在引用文本后插入右双引号。通过设置 content 属性为 “\201D”（Unicode字符 ”）。
在这里插入图片描述
8、::first-line、::first-letter 和 ::selection

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      p {
        width: 100px;
      }
      p::first-line {
        font-weight: bold;
        color: blue;
      }
      p::first-letter {
        font-size: 24px;
        color: red;
      }
      ::selection {
        background-color: yellow;
        color: black;
      }
    </style>
  </head>
  <body>
    <p>
      This is the first line of text. The rest of the text goes here. This is
      just an example.
    </p>
  </body>
</html>

例子中分别给第一行设置了加粗且文字颜色是蓝色、给第一个字符设置了大小及颜色、选中文字黄色背景。

第六行是一个选中颜色的效果
在这里插入图片描述

本文只是列举了一些伪类和伪元素以及它们的一点小用法。伪元素和伪类还有很多用处。

heiyay

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪元素和伪类的区别和作用？

伪元素伪元素（pseudo-elements）是CSS中的一种选择器，用于选择元素的特定部分而不是整个元素本身。伪元素允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪元素的语法以（双冒号）作为前缀，如::before和::after。::before：用于在所选元素的内容之前插入生成的内容。这通常用于在元素前面添加一些装饰性的内容，比如图标或文本。::after：用于在所选元素的内容之后插入生成的内容。类似于::before，它也经常用于添加额外的装饰性元素。
复制链接

扫一扫