伪类与伪元素的定义以及区别

84 阅读2分钟

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等伪类使用单冒号(:)