CSS - 伪类

什么是伪类？

你好，未来的CSS法师们！今天，我们将深入CSS伪类的神奇世界。现在，不要被这个花哨的术语吓到——我保证它没有听起来那么复杂。实际上，一旦你掌握了它，你将很快能够像专业人士一样使用伪类！

CSS - Pseudo Classes

那么，伪类到底是什么呢？想象一下，你有一个超能力，可以让你根据网页上元素的状态或条件来设置它们的样式。这正是伪类所做的！它们允许你根据诸如用户是否将鼠标悬停在元素上、元素是否列表中的第一个子元素，甚至页面使用的语言等因素来应用样式。

语法

在我们具体探讨伪类之前，让我们先快速了解一下语法。实际上非常简单：

选择器:伪类 {
属性: 值;
}

看到选择器后面的冒号（:）了吗？这就说明你在处理一个伪类。简单吧？

伪类 Hover

让我们从一个最常见且有趣的伪类开始：:hover。这个小东西允许你在用户将鼠标悬停在元素上时改变元素的样式。这就像魔法一样！

<button class="my-button">将鼠标悬停在我身上！</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: lightblue;
color: black;
}

在这个例子中，我们的按钮初始时是蓝色背景和白色文字。但是当你将鼠标悬停在上面——噗！——它会变成浅蓝色背景和黑色文字。试试看，见证魔法的发生！

伪类 Active

接下来是:active伪类。当用户激活一个元素时，比如点击一个按钮，这个伪类就会被触发。

<button class="my-button">点击我！</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: darkblue;
transform: scale(0.95);
}

现在，当你点击并按住按钮时，它会变成深蓝色并略微缩小。就像按钮在说：“嘿，我被点击了！”

伪类 Focus

:focus伪类对于提高可访问性特别有用。当元素获得焦点时，比如用户点击或使用Tab键切换到输入字段时，它会应用。

<input type="text" class="my-input" placeholder="输入些什么...">

.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

使用这个CSS，当输入字段获得焦点时，它会获得一个蓝色边框和微妙的蓝色光晕。这是引导用户填写表单的好方法！

伪类 nth Child

现在，让我们使用:nth-child()伪类来点更复杂的。这个伪类允许你根据元素在兄弟姐妹中的位置来选择它们。

<ul class="my-list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
<li>第五项</li>
</ul>

.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
color: blue;
}

在这个例子中，我们将每个奇数编号的列表项设置为浅灰色背景，并将每个第三项设置为蓝色文本。就像在列表中创建了一个模式！

伪类 First-Child

:first-child伪类选择一组兄弟元素中的第一个元素。这对于给列表中的第一个项目或文章中的第一个段落特殊待遇非常有用。

<div class="container">
<p>我是第一个段落！</p>
<p>我只是一个普通段落。</p>
<p>我也是！</p>
</div>

.container p:first-child {
font-weight: bold;
color: blue;
}

现在，第一个段落从其他段落中脱颖而出。就像给第一个元素发了VIP通行证！

伪类 Last-Child

正如你可能猜到的，:last-child是:first-child的反义词。它选择一组兄弟元素中的最后一个元素。

<ul class="my-list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>最后一项！</li>
</ul>

.my-list li:last-child {
font-style: italic;
color: green;
}

使用这个CSS，列表中的最后一项会得到特殊的绿色和斜体待遇。这是结束事物的好方法！

伪类 Lang

:lang伪类有点特殊。它允许你根据文档或元素的语言来选择元素。

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
color: blue;
}

p:lang(fr) {
color: red;
}

p:lang(es) {
color: green;
}

这个CSS会将每个问候语根据其语言着色。就像为你的网站创建了一个多语种的颜色编码！

伪类 Not

最后但同样重要的是，让我们看看:not()伪类。这个伪类有点不同——它选择不匹配你指定的选择器的元素。

<div class="container">
<p>我是一个段落。</p>
<p class="special">我是一个特殊段落！</p>
<p>我是另一个段落。</p>
</div>

.container p:not(.special) {
color: gray;
}

在这种情况下，除了带有"special"类的段落之外，所有段落都将被着色为灰色。就像说，“除了这一件事之外，其他所有东西都应用样式！”

CSS 伪类列表

CSS中还有许多其他的伪类。下面是一些常见的伪类列表：

伪类	描述
:hover	选择鼠标悬停时的元素
:active	选择正在被激活的元素
:focus	选择获得焦点的元素
:nth-child()	根据兄弟姐妹中的位置选择元素
:first-child	选择第一个子元素
:last-child	选择最后一个子元素
:lang()	根据语言选择元素
:not()	选择不匹配选择器的元素
:link	选择未访问的链接
:visited	选择已访问的链接
:checked	选择勾选的输入元素
:disabled	选择禁用的元素
:empty	选择没有子元素的元素

好了，伙计们！我们已经穿越了CSS伪类的世界，从基础到一些更高级的技术。记住，掌握这些的关键是实践。所以，继续在你的项目中尝试这些伪类吧。在你意识到之前，你将能够创建出动态、交互式的网站，以各种酷炫的方式响应用户操作。快乐编码！

Credits: Image by storyset