伪类
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态时根据用户行为而动态变化的。
伪类列举
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 是必不可少的