伪类和伪元素

最新推荐文章于 2024-04-25 20:37:26 发布

杰杰坚强

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量915

点赞数

分类专栏：前端基础进阶文章标签：前端 html css

本文链接：https://blog.csdn.net/wwwjjjjj666/article/details/128446123

版权

前端基础进阶专栏收录该内容

6 篇文章 7 订阅

订阅专栏

一、什么是伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。

伪类就是开头为冒号的关键字：

:pseudo-class-name

备注：与伪元素比较，伪类能够根据状态改变元素样式。

1. 简单伪类

要把“好好学习”变为粉色，使用与不使用伪类对比如下所示：

1.1 不使用伪类

示例：

<!-- 样式 -->
<style>
    .pink {
         color: pink;
    }
</style>

<!-- 结构 -->
<body>
    <div>
        <p class="pink">好好学习</p>
        <p>天天向上</p>
    </div>
</body>

1.2 使用伪类

示例：

<!-- 样式 -->
<style>
    div p:first-child {
        color: pink;
    }
</style>

<!-- 结构 -->
<body>
    <div>
        <p>好好学习</p>
        <p>天天向上</p>
    </div>
</body>

当出现需要新增加一个 p 标签时的场景，通过对比可以发现：

不使用伪类时，需要把 pink 这个类挪到新增加的 p 标签上。
使用伪类时，当应用了 :first-child 伪类选择器，就会一直选中文档中的第一个 p，就不需要编辑 HTML 文档了，表现的像是在 HTML 文档中加入类一样。

2. 用户行为伪类

一些伪类只会在用户以某种方式和文档交互的时候应用。这些用户行为伪类，有时叫做动态伪类，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。

比如：:hover——只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。

示例：

<!-- 样式 -->
<style>
    a:link {
        color: black;
    }
    
    a:hover {
        color: pink;
        font-weight: bold;
    }
</style>

<!-- 结构 -->
<body>
    <a href="">经过我变粉且加粗</a>
</body>

二、什么是伪元素？

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

备注：

相较于伪类，伪元素可用于设置元素特定部分的样式。
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器或基础选择器之后。
一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。按照规范，应该使用双冒号（ :: ）而不是单个冒号（ : ），但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

::before 和 ::after 这组伪元素，它们必须和 content 属性一起使用，使用 CSS 将内容插入到你的文档中。

示例1：

可以用这组伪元素插入一个文本字符串。

<!-- 样式 -->
<style>
    span::after {
        content: '大帅哥';
    }
</style>

<!-- 结构 -->
<body>
    <div>
        <span>我是</span>
    </div>
</body>

此示例中，“大帅哥” 被插入到了 span 元素内容的末尾。

从 CSS 插入文本字符串，我们并不会在 Web 浏览器上经常这么做，因为对于一些屏幕阅读器来说，文本是不可见的，而且对于未来别人的查找和编辑也不是很方便。

示例2：

这组伪元素更推荐的用法是插入一个图标，例如插入一个小箭头，作为一个视觉性的提示，而且我们并不希望屏幕阅读器读出它。

<!-- 样式 -->
<style>
    span::after {
        content: '➥';
    }
</style>

<!-- 结构 -->
<body>
    <div>
        <span>我是</span>
    </div>
</body>

示例3：

我们用 ::before伪元素加入了个空字符串。我们把它设为了display: block，以让它可以用 width 和 height 进行样式化。然后我们可以用 CSS 像任何元素那样样式化。你可以摆弄 CSS，改变它的外观和行为。

<!-- 样式 -->
<style>
    p::before {
        content: '';
        display: block;
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 1px solid black;
    }
</style>

<!-- 结构 -->
<body>
    <div>
        <p>BOX</p>
    </div>
</body>

::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容”。