使用 CSS 伪类选择器选择元素状态

109 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第26天,点击查看活动详情

在本文中,我们将讨论伪类,它是一种 CSS 伪选择器。我们将从定义伪类开始,列出示例并构建一个非常简单的工具提示悬停。

让我们潜入

伪类 ( :)

伪类的行为类似于类,但它们不是实际类。那就是浏览器可能会将它们视为类,但它们不是实际的类。

它们仅在元素处于特定状态时用于选择元素。

例如,它们可用于:

  • 在元素处于活动状态时为其设置样式
  • 获得焦点时设置元素样式
  • 样式访问和未访问的链接不同

伪类选择器的语法是:

selector:pseudo-selector{
   property: value;
}

伪类不能独立工作,它们必须使用冒号与其他选择器组合:

一个流行的例子是:hover当鼠标“悬停”在元素上时样式元素。

h1:hover{
    background-color: gray;
    border-left: 2px solid green;
}

在上面使用的示例中:

  • h1首先使用 ( )选择原始元素
  • 然后添加伪类:hover来指定所需的状态。> 注意冒号和伪类必须写在一起,中间不能有空格。

原始元素只包含默认样式,当它处于指定状态时,它会被伪选择器覆盖。这是一个带有 样式的元素:hover将保持正常,直到鼠标悬停在它上面。

与其他选择器不同,伪类名称不区分大小写,即无论您编写:Hover还是:hover浏览器仍会以相同的方式读取它

例子

有很多伪类,幸运的是您不必记住它们,因为大多数 IDE(如 VScode)都为伪类提供了自动完成功能。

伪类可以是通用的或特定于元素的,即一些伪类可以用于所有元素,而其他伪类只能用于某些元素。

伪类的示例包括:

  • :link:这用于选择页面上尚未访问的链接。
  • :visited用于选择已经访问过的页面上的链接。
  • :active用于选择当前处于活动状态的链接。 > 注意:造型a:active必须在后a:link才能a:visited有效!
  • :focus用于选择当前正在填充的输入元素。
  • :optional这用于选择可选的输入元素。
  • :empty用于选择空元素。
  • :root用于选择文档的根元素。

如何使用伪类制作简单的工具提示悬停

工具提示悬停的一个示例是当您将鼠标悬停在一个元素上时,会显示一个工具提示以向您展示有关该组件的更多信息。

如果您是一个完全的初学者,请不要担心,我只是展示如何在网页上使用伪类的示例。

制作简单工具提示的步骤:

  1. 编写HTML:

    <h3 class="element">
        Hover over me to see "more".
        <span class="tooltip">MORE, now you have seen "more"</span>
    </h3>
    

    这里我们定义了 2 个元素 ah3作为父元素, aspan作为子元素(在父元素内部)。

    h3元素被赋予“元素”类,而被span赋予“工具提示”类。

  2. 将 的可见性/显示设置span为无:

    .tooltip{
        display: none;
        background-color: #000;
        color: #fffd;
        padding: 10px;
        border-radius: 10px;
    }
    

    我们不希望 span 元素正常可见,所以我们通过将 display 设置为 none 来隐藏它。

    我还添加了额外的样式以使 span 元素看起来更好。(可选的)

  3. 将悬停伪类添加到h3(父元素):

    .element:hover
    

    这仅在元素处于悬停状态时选择元素,即当鼠标悬停在它上面时。

    但是我们想要改变的不是父元素而是子元素,我们想要将可见性/显示改回块(默认显示)。

  4. 更改span元素的显示:

    .element:hover .tooltip{
        display: block;
    }
    

    我们使用后代选择器连接 2 个元素,这样当鼠标悬停在父元素上时,工具提示的显示将变为块状。

最后

我希望你现在知道什么是伪类以及如何在你的网站上使用它们。

伪类很重要,因为它们使您的页面更具响应性,因为网站的某些内容会根据用户操作而变化。

注意:不要将伪类与只选择元素的某些部分的伪元素混淆。

如果你喜欢这篇文章,别忘了留下一个赞并关注更多内容。

谢谢阅读