1.伪类:伪类用于当已有元素处于的某个状态时,为其添加对应的样式,根据用户行为变化而动态变化
:visited用于选择已访问的链接
:hover用于选择鼠标指针浮动在其上的元素
:active用于选择活动的链接
:focus用于选择获取焦点的输入字段
:first-child用于匹配元素的第一个子元素
: last-child用于匹配元素的最后一个子元素
:first-of-type用于匹配属于其父元素的首个特定类型的子元素的每个元素
:last-of-type用于匹配元素的最后一个子元素
:nth-child根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数,an+b匹配到的元素示例如下:
- 1n+0,或n,匹配每一个子元素
- 2n+0,或2n,匹配位置为2、4、6、8…的子元素,该表达式与关键字even等价
- 2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价
- 3n+4匹配位置为4、7、10、13…的子元素
2.伪元素:伪元素用于创建一些不在文档树中的元素,并为其添加样式
E::after/E:after 在E元素内部创建一个行内元素,作为E的最后一个孩子,其用法和特性与:before相似
E::first-letter/E:first-letter匹配E元素内容的第一个字母,被修饰的首字母不在文档树中
E::first-lineE/:first-line 匹配E元素内容的第一行,这个伪元素只能用在块元素中,不能用在内联元素中
3.区别:CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)