伪类与伪元素

伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的。

伪类列举

1. a 元素 link visited hover active 顺序

a:link{
  color: blue;
}
a:visited{
  color: yellow;
}
a:hover{
  color: red;
}
a:active{
  color: pink;
}

link 要放在最前面，否则它始终生效，会覆盖放在它前面的状态样式；visited 要放在 hover 和 active 的前面，否则点击过链接一次之后 visited 就会始终生效，hover 和 active 的状态样式会被覆盖；hover 要放在 active 前面，在active 状态时 hover 也是生效的，否则 active 状态样式会被覆盖掉。

2. first-child 与 first-of-type

• p: first-child —— 选择的是 p 的父元素的第一个子元素
• p: first-of-type —— 选择的是 p 的父元素的第一个 p 类型的子元素

同样可以得出 last-child、last-of-type、nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n) 的选择方式。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。

伪元素列举

1. :before 与 :after

• element:before 在element内部创建一个行内元素，作为element的第一个孩子
• element:after 在element内部创建一个行内元素，作为element的最后一个个孩子
• 其中content 是必不可少的