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

[...]

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

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

2、访问的链接

3、一个全屏的元素。

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

    
item 1
    
item 2
    
item 3
    
item 4

 

    option 1
    option 2
    option 3
    option 4

我们可以使用以下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:visited{
  color: #8D20AE;
}
.button:hover,
.button:focus{
  font-weight: bold;
}

2.基于状态的伪类

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

:checked可以应用于复选框（）

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

:disabledHTML元素，可以是在已禁用模式，例如，，和。

最流行的基于状态的伪类必须是: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伪类。

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

久久企业网站后台管理系统1.0

一、功能简介本软件完全适应大、中、小型网站建设需要，让您用很便宜的虚拟主机空间也可以开通4个独立的网站！久久企业网站后台管理系统各种版本开发基础架构均为php+mysql+div+css+伪静态，迎合搜索引擎排名的喜好。另外值得一提的是本站特色的TAG系统可为您的网站做出无限分类，不用任何设置全站ULR伪静态！本建站系统除了有产品发布、新闻（软文）发布、订单管理系统和留言反馈等一些最基本的功能之外

下载

假设Ñ为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中的第二个元素

  
Paragraph 1, Child 1
  
Unordered List 1, Child 2
  
Paragraph 2, Child 3

  
Paragraph 1, Child 1
  
Paragraph 2, Child 2
  
Unordered List 1, Child 3