Skip to content

伪元素 ::before 与伪类 :first-child 的区别

到 CSS3 才正式区分出来叫伪元素,

伪类

元素的某种状态 ::hover ::focus ::active ::visited :checked :disabled :last-child :nth-child :first-child

伪元素

假元素只存在于 css 中 ::before ::after ::placeholder ::section

css
div.section::selection{
    color: rgb(247, 8, 135);
}
input.placeholder::placeholder{
    background-color: rgb(80, 156, 231);
    color: rgb(19, 235, 235);
}

区别

核心区别是否创造了“新的元素”

表示: (伪类用 : 表示)、(伪元素用 :: 表示),因为兼容性问题,都用一个冒号表示: 伪元素: 假元素之存在于 css 中; 不存在于 DOM 树的虚拟元素 ::before ::after 伪类: 元素的某种状态 nth-child(2n) :selection :checked :disabled :hover :first-child

在 MIT 许可下发布