[分享]css中常用的伪类选择器含义

伪类是CSS中的一种选择器，它可以选择元素的某些状态或属性。下面是CSS中常用的伪类选择器及其含义：:hover – 当鼠标悬停在元素上时匹配该元素。 :focus – 当元素获得焦点时匹配该元素。 ...

伪类是CSS中的一种选择器，它可以选择元素的某些状态或属性。下面是CSS中常用的伪类选择器及其含义：

:hover – 当鼠标悬停在元素上时匹配该元素。 
:focus – 当元素获得焦点时匹配该元素。 
:active – 当元素被激活（例如，鼠标点击）时匹配该元素。 
:first-child – 匹配父元素下的第一个子元素。 
:last-child – 匹配父元素下的最后一个子元素。 
:nth-child(n) – 匹配父元素下的第n个子元素（n从1开始）。 
:nth-child(odd) – 匹配父元素下的奇数个子元素。 
:nth-child(even) – 匹配父元素下的偶数个子元素。 
:nth-last-child(n) – 匹配父元素下的倒数第n个子元素。 
:nth-of-type(n) – 匹配父元素下的第n个指定类型的子元素（n从1开始）。 
:nth-last-of-type(n) – 匹配父元素下的倒数第n个指定类型的子元素。 
:first-of-type – 匹配父元素下的第一个指定类型的子元素。 
:last-of-type – 匹配父元素下的最后一个指定类型的子元素。 
:only-of-type – 匹配父元素下仅有的指定类型的子元素。 
:only-child – 匹配父元素下仅有一个子元素的元素。 
:not(selector) – 匹配不符合选择器的元素。

伪类选择器可以通过在元素的class和id属性前面添加一个冒号来使用，例如：

/* 匹配 class 为 button 的元素在鼠标悬停时改变背景色 */
.button:hover {
  background-color: #f00;
}

/* 匹配 id 为 link 的元素在获得焦点时改变字体颜色 */
#link:focus {
  color: #00f;
}

通过使用伪类选择器，我们可以轻松地为网站添加一些特殊的互动效果和样式，提高用户体验。