html5的伪类选择器 css3伪类选择器有哪些

伪类选择器 ：为元素的不同状态或不确定存在的元素设置样式规则

CSS3中新增了很多伪类选择器，使我们对元素的样式控制变得更加方便

一、:target

用于控制具有锚点目标元素的样式

此时id 为box 的盒子color为红色

二、:root

根元素选择伪类，即html,两者效果一样

三 、:empty

选择没有子元素的元素，也不能包括文本元素，空格换行等

四、:first-child 和 last-child

first-child：匹配属于父元素中的第一个

last-child：匹配属于父元素中的最后一个

所以在父元素中有多种元素时，要看清是否满足条件

五、:first-of-type 和 :last-of-type

first-of-type：找到父元素的特定元素的首个子元素

last-of-type：找到父元素的特定元素的最后一个子元素

六、:not() 否定选择器

与别的选择器配合使用，选择不满足括号中选择器条件的元素

.list h2:not(:last-of-type) {
      background-color: #f00;
  }

除了最后一个h2元素，其他背景为红色

七、:nth-child(n) 和 :nth-of-type(n)

nth-child(n) ：选择父元素的第 n 个子元素，不论元素的类型。

nth-of-type(n)：选择父元素的特定元素类型的第 n 个子元素。

参数可以是数字 ，表达式（2n+1 等等），odd 奇数, even 偶数。

通过这个例子，我们就可以明白两者的不同。

八、:only-child 和 :only-of-type

only-child ：选择父元素的唯一子元素

only-of-type ：选择父元素中同级特定元素类型的唯一子元素

还有一些我就不介绍了，选择器好懂，难在我们要灵活运用，在合适的地方合适的选择器，快速简洁的找到我们要控制的元素。伪类选择器不只这些，还有表单伪类，字符伪类。