详解 CSS 属性 - 伪类和伪元素的区别
Published by Xianqiao Wang on May 5th, 2015
- CSS 伪元素用于将特殊的效果添加到某些选择器。
- CSS 伪类用于向某些选择器添加特殊的效果。
- 第一两者都与选择器相关，第二就是添加一些"特殊"的效果。
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
伪元素：
你只能在一个选择器中使用一个（css4 中说一定）伪元素. 伪元素必须跟在一个简单选择器语句的后面.
但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示（有兼容问题）。注意: ::selection 永远只能以双引号开始 (::).
- ::after //实现表格列高亮
- ::before
- ::first-letter //不作用在inline元素下，因为她可以跨标签创建伪元素，某些css属性无效
- ::first-line
- ::selection
- ::slotted（）选择具有slot属性并在第一级的元素 作用？//::content // shadow DOM中content元素 //::shadow 穿一次shadow DOM边界
- ::backdrop（:fullscreen <dialog>的背景）
- ::placeholder（非标准： ::-webkit-input-placeholder::-moz-placeholder:-ms-input-placeholder）
- :link
- :visited （隐私问题）
- :hover
- :active
- :focus永远有且只有一个元素
- :root
- :scope // scoped属性的style的父元素下面 // 已经移除
- :host/:host(<compound-selector>)/:host-context(<跨边界祖先选择器>) // shadow DOM使用
- :first-child
- :last-child
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-of-type
- :last-of-type
- :only-of-type
- :empty //没有子节点
- :placeholder
- :placeholder-shown //css4
- :has() // 相当于父选择器的功能 css4，影响渲染，如循环渲染
- :matches // css4 , 现在用 :-vendor-any() ，遍历的作用
- :focus-within // css4 该元素的子元素获得焦点
- :only-child
- :target 目标（锚）
- :checked
- :enabled
- :disabled
- :not
- :invalid 无效的表单控件
- :valid
- :read-write
- read-only
- :required必须的表单控件
- :optional可选的表单控件
- :unresolved符合标准元素命名（含-）但没有注册的元素
- :dir()