CSS伪类是什么？CSS伪类的详细介绍

按照我们之前关于margin：auto和CSS Floats的内容介绍，我们在这篇文章中对伪类进行了更深入的研究。我们将看到什么是伪类，它们是如何工作的，我们如何对它们进行分类，以及它们与伪元素的区别。（推荐教程：css视频教程）

什么是伪类？

一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法 将伪类添加到CSS选择器，:如下所示：a:hover{ ... }

一个CSS类是我们可以添加到HTML我们想申请，同一款式的规则元素，例如顶部菜单项或侧边栏小工具的标题属性。换句话说，我们可以使用CSS类对以某种方式相似的HTML元素进行分组或分类。

伪类与它们类似，因为它们也用于将样式规则添加到共享相同特征的元素。

但是，虽然真正的类是用户定义的并且可以在源代码中被发现，但是例如，基于所属的HTML元素的当前状态，UA（用户代理）（例如web浏览器）添加<div class="myClass">伪类。

伪类和伪元素可以在CSS选择器中使用，但在HTML源代码中不存在。相反，它们在某些条件下由UA“插入”以用于在样式表中寻址。

伪类的目的

常规CSS类的工作是对元素进行分类或分组。开发人员知道他们的元素是如何分组的：他们可以形成类似“菜单项”，“按钮”，“缩略图”等的类来分组，以及后来的类似元素的样式。这些分类基于开发人员自己给出的元素特征。

例如，如果开发者决定使用a <div>作为缩略图对象，则可以使用<div>“缩略图”类对其进行分类。

<div class="thumbnail">[...]</div>

然而，HTML元素具有基于其状态，位置，性质以及与页面和用户的交互的共同特征。这些是HTML代码中通常不标记的特征，但我们可以使用 CSS中的伪类来定位它们，例如：

1、一个元素，它是其父元素中的最后一个子元素

2、访问的链接

3、一个全屏的元素。

这些是伪类通常所针对的特征。为了更好地理解类和伪类之间的区别，我们假设我们使用该类.last来标识不同父容器中的最后一个元素。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

我们可以使用以下CSS设置这些最后一个子元素的样式：

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

但是当最后一个元素改变时会发生什么？好吧，我们必须将.last类从前一个元素移动到当前元素。

更新类的麻烦可以留给用户代理，至少对于元素中常见的那些特征（并且最后一个元素是它可以获得的常见元素）。拥有预定义的:last-child伪类确实非常有用。这样，我们不必指示 HTML代码中的最后一个元素，但我们仍然可以使用以下CSS来设置它们的样式：

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

伪类的主要类型

伪类有很多种，它们都为我们提供了基于其特征无法访问或难以访问的特征来定位元素的方法。这是MDN 中标准伪类的列表。

1.动态伪类

动态伪类根据它们为响应用户的交互而转换的状态动态地添加到HTML元素和从HTML元素中删除。一些的动态伪类的例子是，，，和，所有这些都可以被添加到锚定标记。:hover:focus:link:visited<a>

a:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

2.基于状态的伪类

基于状态的伪类在处于特定静态时添加到元素中。其中一些最着名的例子是：

:checked可以应用于复选框（<input type="checkbox">）

:fullscreen 定位当前以全屏模式显示的任何元素

:disabledHTML元素，可以是在已禁用模式，例如<input>，<select>，和<button>。

最流行的基于状态的伪类必须是:checked，它标记是否选中了复选框。

.checkbox:checked + label{
  font-style:italic;
}
input:disabled{
  background-color: #EEEEEE;
}

3.结构伪类

结构伪类根据它们在文档结构中的位置对元素进行分类。它最常见的例子是:first-child，:last-child和:nth-child(n)- 都可以用来根据容器的位置来定位容器内的特定子元素 - 并且:root它以DOM中最高级别的父元素为目标。

4.杂项伪类

还有一些难以分类的杂项伪类，例如：

:not(x)选择与选择器x不匹配的元素

:lang(language-code) 选择哪些内容采用特定语言的元素

:dir(directionality)选择具有给定方向性内容的元素（从左到右或从右到左）。

p:lang(ko){
  background-color: #FFFF00;
}
:root{
  background-color: #FAEBD7;
}

nth-child与类型 Pseudo-Classes的第n个

其中一件关于伪类最难的事情是可能理解的差别:nth-child和:nth-of-type伪类。

两者都是结构伪类，并在父元素（容器）内标记特定元素，但方式不同。

假设Ñ为2，然后:nth-of-child(n)靶向是一个元素它的父元素的第二个孩子，以及:nth-of-type(n)目标第二的中相同类型的元件的（例如段落）父元素内。

我们来看一个例子吧。

/* a paragraph that's also the second child inside its parent element */
  p:nth-child(2) {
  color: #1E90FF;    // lightblue
}
/* the second paragraph inside a parent element */
p:nth-of-type(2) {
  font-weight:bold;
}

让我们看看这个简短的CSS样式如何在两种不同的情况下使用HTML。

案例1

在案例1中，a中的第二个元素<div>是无序列表，因此nth-child(2)规则不适用于它。虽然它是第二个子元素，但它不是一个段落。

但是，如果父元素确实具有第二个段落，则该nth-of-type(2)规则将适用，因为此规则仅查找<p>元素，而不关心父元素内的其他类型的元素（例如无序列表）。

在我们的示例中，nth-of-type(2)规则将设置第二个段落，即子3。

<!-- Case 1 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <ul>Unordered List 1, Child 2</ul>
  <p>Paragraph 2, Child 3</p>
</div>

案例2

在第二种情况下，我们将无序列表移到第三位，第二段将在它之前。这意味着将应用规则:nth-child(2)和:nth-of-type(2)规则，因为第二个段落也是其父<div>元素的第二个子句。

<!-- Case 2 -->
<div>
  <p>Paragraph 1, Child 1</p>
  <p>Paragraph 2, Child 2</p>
  <ul>Unordered List 1, Child 3</ul>
</div>

如果你想更多地了解:nth-of-child和:nth-of-type伪类之间的差异，CSS Tricks上有一个很棒的帖子。如果您使用SASS，Family.scss可以帮助您创建复杂的nth- child'ified元素。

伪类与伪元素

当我们谈论伪类时，理解它们与伪元素的区别也很重要，以免混淆它们。

Pseudo-elements用户代理也添加了诸如::before和::after（参见本教程如何使用它们），并且可以使用CSS对它们进行定位和设置样式，就像伪类一样。

但是，虽然我们使用伪类来选择文档树中仅存在未单独标记的HTML元素，但伪元素允许我们根据DOM（例如和）或仅作为目标通常不存在于DOM中的元素。现有元素的某些部分（例如或）。::before::after::first-letter::placeholder

语法也有区别。伪元素通常用双冒号识别::，而伪类用单冒号识别:。

这可能导致混乱，如CSS2中，伪元素也标记为单个冒号 - 浏览器仍接受伪元素的单冒号语法。

我们用CSS来定位伪类和伪元素之间也存在差异。

1.它们在CSS选择器序列中的位置

伪元素只能出现在选择器序列之后，而伪类可以放在CSS选择器序列中的任何位置。

例如，您可以<ul>以两种方式定位列表元素的最后一个列表项。

<ul>
  <li class="red"></li>
  <li></li>
  <li class="red"></li>
  <li class="red"></li>
</ul>

ul > :last-child.red {
  color: #B0171F;
}

要么

ul > .red:last-child {
  color: #B0171F;
}

选择器的第一个序列选择<ul>元素中的最后一个子元素（具有类.red），第二个元素选择.red内部具有类的元素中的最后一个子元素<ul>。如您所见，伪类的位置是可变的。

让我们尝试用伪元素做类似的事情。

ul > .red::after {
  display: block;
  content: 'red';
  color: #B0171F;
}

上面的CSS代码是有效的，文本“red”将出现在<li>带有类的项目之后.red。

另一方面，这段代码不起作用，因为我们无法改变选择器序列中伪元素的位置。

ul > ::after.red {
  display: block;
  content: 'red';
  color: #B0171F;
}

2.选择器序列中的出现次数

此外，只有一个伪元素可以出现在选择器旁边，而伪类可以在组合有意义的情况下相互组合。例如，为了目标，同时也是只读的，我们可以创建伪类组合的第一个孩子元素:first-child，并:read-only以下列方式：

:first-child:read-only {
  color:#EEEEEE;
}

jQuery选择器扩展

具有:语法的选择器代码并不总是构成适当的CSS伪类。如果您曾经使用过jQuery，那么您可能已经使用了许多具有:语法的选择器，例如$(':checkbox')，$(':input')和$(':selected')。

重要的是要知道这些不是 jQuery所针对的CSS伪类。它们被称为jQuery选择器扩展。

jQuery选择器扩展允许您使用更简单的关键字来定位HTML元素。它们中的大多数是多个普通CSS选择器的组合，它们用单个关键字表示。

/* Change the font of all input-related HTML elements,
like button, select, and input */
$( ":input" ).css("font-family","courier new")

以上就是CSS伪类是什么？CSS伪类的详细介绍的详细内容，更多请关注Gxlcms其它相关文章！