CSS之伪类选择器与伪元素选择器

伪类选择器(a:hover, li:nth-child)

伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。)；还有不能被常规CSS选择器获取到的信息(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。)

• 动态伪类选择器
  :link。元素被定义了超链接但并未被访问过
  :visited。元素被定义了超链接并已被访问过
  :active。元素被激活
  :hover。鼠标悬停
  :focus。元素获取焦点
• UI 元素状态伪类选择器
  • :checked。选中的复选按钮或者单选按钮表单元素
  • :enabled。所有启用的表单元素
  • :disabled。所有禁用的表单元素
• 结构性伪类选择器

  • :root 将样式绑定到页面的根元素中, 在 HTML 页面中即

  • :not 对某个结构元素使用样式, 但是想排除这个结构元素中的某个元素

  • :empty 匹配所有不包含子元素或者文本的空元素

  • :target 当浏览器地址里的hash(地址里#号后面的部分)和 :target 伪选择器指定的ID匹配上时, 它的样式就会在这个ID元素上生效
    nth 选择器

  • :first-child选择某个元素的第一个子元素

  • :last-child选择某个元素的最后一个子元素

  • :nth-child()选择某个元素的一个或多个特定的子元素

    :nth-child(length);/参数是具体数字/
    :nth-child(n);/参数是n, 不能是其他字符,n从0开始计算/
    :nth-child(nlength)/n的倍数选择，n从0开始算/
    :nth-child(n+length);/选择大于length后面的元素/
    :nth-child(-n+length)/选择小于length前面的元素/
    :nth-child(nlength+1);/表示隔几选一/
    :nth-child(odd);/选择位数为奇数的元素/
    :nth-child(even);/选择位数为偶数的元素/
    :nth-last-child() //选择某个元素的一个或多个特定的子元素, 从这个元素的最后一个子元素开始算

  • :nth-of-type()选择指定的元素

  • :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算

  • :first-of-type选择一个上级元素下的第一个同类子元素

  • :last-of-type选择一个上级元素的最后一个同类子元素

  • :only-child选择的元素是它的父元素的唯一一个子元素

  • :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素

  • :empty选择的元素里面没有任何内

伪元素选择器

本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码），伪元素不是节点，它不会出现在DOM树中，但是在显示上会具备节点的效果

• ::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
• ::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉
• ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
• ::selection用来改变浏览网页选中文的默认效果