AI正在生成摘要
CSS伪类和伪元素区分:伪类以冒号(:)开头,用于选择特定状态的元素,如:hover、:active等;伪元素以双冒号(::)开头,用于在文档中插入虚构的元素,如::before、::after等。伪类作用于标签本身,伪元素作用于虚拟元素。常见伪类包括:hover、:focus等,常见伪元素包括::first-letter、::before等。
伪类(pseudo class)和伪元素(pseudo element)都是前端开发中经常接触的概念,但是这两个概念特别容易搞混。
什么是伪类、伪元素?
伪类:以冒号(:)开头,用于选择处于特定状态的元素。
伪元素:以双冒号(::)开头,用于在文档中插入虚构的元素。
伪类举例:
a:hover { color: red; }
hover表示了a标签的某种状态(鼠标指针悬浮在a上时),选择器选择的是伪类前面的元素(a),当出现伪类描述的状态(元素处于悬浮状态)时,样式才生效
伪元素举例:
div::before { content: '老司机'; }
before的作用是在内容元素之前创建一个不在文档树中的元素,选择器选择的不是div,而是浏览器自动创建了一个虚拟的元素。
结论:
伪类用于向某些已经存在的选择器添加特殊效果,其本质还是类(class),作用于标签本身,但是限定了状态条件。
伪元素用于将效果添加到不存在的虚拟元素中,本质是元素(element),作用于该虚拟元素。
常见伪类:
:active元素处于活动状态时 :focus元素已获取焦点时 :hover元素处于悬浮状态时 :link链接未访问时 :visited链接已访问时 :first-child元素是首个子元素时 :last-child元素是最后一个子元素时 :nth-child()元素是第 n 个子元素时 :nth-last-child()元素是倒数第 n 个子元素时 :only-child元素是唯一子元素时 :first-of-type元素是首个特定类型的子元素时 :last-of-type元素是最后一个特定类型的子元素时 :nth-of-type()元素是第 n 个特定类型的子元素时 :nth-last-of-type()元素是倒数第 n 个特定类型的子元素时 :only-of-type元素是唯一的特定类型的子元素时 :not不满足指定条件时 :target元素 id 匹配到哈希值时 :root元素是文档树的根元素时 :lang()匹配到指定语言时 :empty元素处于没有子元素状态时 :invalid 和 :valid表单项是否有效 :required 和 :optional表单项是否必填 :in-range和 :out-of-range表单项是否超出范围 :read-only和 :read-write表单项是否只读 :enabled和 :disabled表单项是否禁用
常见伪元素:
::first-letter选中块状元素中的首字母 ::first-line选中首行 ::before在之前创建一个不在文档树中的元素 ::after在之后创建一个不在文档树中的元素 ::placeholder选中表单元素的占位文本 ::file-selector-button选中类型为 file 的 input 里面的 button