伪类选择器 伪元素选择器_伪类选择器简介

伪类选择器 伪元素选择器

我们将在本文中更具体地讨论伪类的主题！ 首先，您可能会问什么是伪类。 它们是CSS语言的关键字，可让您与外部因素或事件进行交互，例如将鼠标移到元素上或访问链接。 我们不会在这里介绍所有的伪类，但是在阅读了本文之后，您就会明白这一点！ 这些伪类背后的主要思想是它们以CSS语言公开事件，这意味着更易于与网页上HTML元素进行交互。

让我们从一些例子开始！

:active

该伪类充当Click事件，并在每个元素上使用。

例：

p :active { 
  background-color : red; 
} 

说明：单击该元素时，背景变为红色。

::after

您可以在元素后的html中插入一些内容。 最好看一个例子来理解。

例：

p ::after { 
  content : "insert here" ; 
  color : red; 
}

::before

此类的行为类似于:: after，但另一方面，它是在元素之前插入内容。

例：

p ::before { 
  content : "insert here" ; 
  color : red; 
}

::first-line

在女巫上选择文本的第一行，即可应用属性。

例：

p ::first-line { 
  color : red; 
}

::first-letter

选择文本的第一个字母。

例：

p ::first-letter { 
  color : red; 
  font-size : 2rem ; 
}

:first-child

这很有趣，因为正在选择其父级的第一个元素。

例：

.class :first-child {
  color :red;
}

更有趣的是，您可以更具体地选择特定类型的第一个孩子。 例：

.class p :first-child {
  color :red;
}

这将选择.class中类型为<p>的第一个元素

从现在起您已经有了主意。 有关更多伪类，请参考本页 。

有用的链接

如果您想学习并找到一份工作，我会参考Microverse页面。 在这里，您将获得所有帮助和工具，以开始学习并成为Full Stack Developer。

对于本文，我从www.w3schools.com获得了启发。

您可以在Twitter上找到我| Github | 领英

翻译自: https://hackernoon.com/introduction-to-pseudo-class-selectors-ce2b369r

伪类选择器 伪元素选择器