伪类与伪元素

常见的伪类有

动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes）
:target
语言伪类（language pseudo-classes）
:lang( )
元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked
结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
否定伪类（negation pseudo-classes）
:not()

动态伪类

• 使用举例
  a:link 未访问的链接
  a:visited 已访问的链接
  a:hover 鼠标挪动到链接上
  a:active 激活的链接（鼠标在链接上长按住未松开）

  • 使用注意
    :hover必须放在:link和:visited后面才能完全生效
    :active必须放在:hover后面才能完全生效
    所以建议的编写顺序是 :link、:visited、:hover、:active
    记忆：女朋友看到LV包包后，ha ha大笑

  • 除了a元素，:hover、:active也能用在其他元素上

• :focus指当前拥有输入焦点的元素（能接收键盘输入）
  文本输入框一聚焦后，背景就会变红色
  因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

  • 动态伪类编写顺序建议为
    :link、:visited、:focus、:hover、:active

  • 去除a元素默认的:focus效果

    
    去除focus效果

或者将tabindex属性设置为-1
使用tabindex可以控制tab键选中元素的顺序，从1开始
tabindex设置为-1，代表禁止使用tab键选中

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

image.png

相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

目标伪类

• 当元素被锚点链接当作目标跳转之后起作用

  
  目标伪类

语言伪类

• 语言是en系列（英语）的所有div元素

  
  image.png image.png

元素状态伪类

:enabled 启用状态
:disabled 禁用状态
:checked 被选中状态

image.png

结构伪类

• :nth-child(1)
  是父元素中的第1个子元素

  
  :nth-child

• :nth-child(2n)
  n代表任意正整数和0
  是父元素中的第偶数个子元素（第2、4、6、8......个）
  跟:nth-child(even)同义

  
  偶数展示

• :nth-child(2n + 1)
  n代表任意正整数和0
  是父元素中的第奇数个子元素（第1、3、5、7......个）
  跟:nth-child(odd)同义

  
  奇数展示

• :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素

  
  image.png

:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
等同于:first-child:last-child或者:nth-child(1):nth-last-child(1)
:only-of-type，是父元素中唯一的这种类型的子元素
等同于:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)
:root，根元素，就是HTML元素

• :empty代表里面完全空白的元素

  
  image.png image.png

• 否定伪类

  • :not()的格式是:not(x)
    x是一个简单选择器
    元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
    :not(x)表示除x以外的元素

    
    image.png image.png

:not()支持简单选择器，不支持组合。比如下面的写法是不支持的

伪元素

常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after

• 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

::first-line可以针对首行文本设置属性

image.png image.png

• 只有下列属性可以应用在::first-line伪元素
  字体属性、颜色属性、背景属性
  word-spacing、letter-spacing、text-decoration、text-transform、line-height

::first-letter可以针对首字母设置属性

image.png

• 只有下列属性可以应用在::first-letter伪元素
  字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
  text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）

image.png

在content中，还可以使用attr(属性名)来获得元素的属性值

image.png