伪类和伪元素
伪类
用于给某些选择器添加特定的效果
css中的伪类有
- :link 未访问的链接
- :hover 鼠标移到链接上
- :active 选定的链接
- :visited 已访问的链接
- :focus 获得焦点的元素
- :first-child 第一个子元素
- :lang 选定lang属性为指定值的元素
- :lang(on) ----> <p lang='on'></p>
css3新增伪类
- :last-child
- only-child
- first-of-type
- last-of-type
- only-of-type
- nth-of-type(n)
- nth-last-of-type(n)
- nth-child(n) 选择其父元素的第n个元素，如果第n个元素与指定的元素类型相同，则正确显示效果
- 如：p:nth-child(2) 是选择p的父元素的第2个元素，如果第二个元素是p，正确显示效果
- nth-last-child(n) 选择其父元素的倒数第n个元素
- :root 选择html根标签
- :enable 选择已启用的元素
- :disable 选择已禁用的元素
- :checked 匹配被选中的input元素，只用于单选按钮和复选框
- :not(selector/tag) 匹配非选择器/指定元素的每个元素
- :empty 选择内容为空的元素
- :target 选择链接的锚点元素
- 如: <a href='#dv'>aa</a> <div id='dv'></div> 选中的就是div
伪元素
用于向选择器设置特定的效果
css伪元素
- ::fist-letter 文本首字母
- ::first-line 文本首行
- ::before 在元素内容前面插入一个元素
- ::after 在元素内容后面插入一个元素
css3伪元素
- ::selection 设置选中的文本的样式
伪类和伪元素的区别
- 伪类为单冒号，伪元素为双冒号
- 伪类可以叠加使用，而伪元素在一个选择器上只能使用一个
- 伪类与类选择器优先级相同，伪元素和标签选择器优先级相同
