伪类选择器与伪元素

omgEn
230 阅读3分钟

结构性伪类选择器

  • X:first-child IE7及以上支持
  • X:last-child
  • X:nth-child(n) 匹配所有值为n的子元素。索引值从1开始
    • nth-child(odd)奇数
    • nth-child(even)偶数
    • nth-chlid(4n+2)4的倍数
  • X:only-child(n) 用的较少，父元素下的这个子集只有一个
  • X:nth-last-child(n) 从最后一个开始算索引
  • li:first-of-type 第一个匹配到的类型是li的
  • X:last-of-type 匹配同级兄弟元素中的最后一个X元素
  • X:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素X
  • X:only-of-type(n)
  • X:nth-lath-of-type(n)
  • :root匹配文档的根元素，即html
  • :empty 匹配没有任何子元素(文本也算)的元素X
  • :not()IE8不支持，匹配所有不匹配简单选择符的元素

目标伪类选择器

  • :target 选择匹配的所有元素，且匹配被相关URL指向

UI元素状态伪类选择器

  1. form表单中
  • :enabled 所有
  • :disabled 所有不可用的元素
  • :checked 选中状态的元素
  1. ::selection被用户选择后可以修改高亮的颜色和背景

链接的四种伪类状态

  • a:link 尚未被单击的普通链接，且鼠标没有悬停在上面
  • a:visited 根据web浏览器的历史判断已由访客单击的链接
  • a:hover 用于修改鼠标悬停其上的链接外观，这个也可用于其他标签
  • a:active 访客点击链接时链接的外观，即按下鼠标到松开之前的这几秒

动态伪类选择器

  • :foucs 用户行为选择器，获取焦点

伪元素与伪类选择器的区别

  1. :伪类，为了通过选择器，格式化DOM以外的信息以及不能被常规CSS选择器获取到的信息
  2. ::伪元素，可以创建一些文档语言无法创建的虚拟元素
    总结： 伪类是为了弥补CSS选择器的不足，用来更方便的获取信息。
    伪元素本质上是创建了一个虚拟容器（元素），可以在其中添加内容或样式（看的到选不到，可以当做一个内联标签来用）。
    注：一个选择器可以同时使用多个伪类，而一个循着去只能同时使用一个伪元素？不对把，before和after不是能同时用吗

选择器

  • ~:查找某个元素后面的所有兄弟元素
  • +:查找紧邻的兄弟元素
  • > 第一个子孩子

CSS3选择器——属性选择器

  • a[title] 只使用属性名，但没有确定任何属性值
  • a[title='value'] 指定属性名，并指定了该属性的属性值；属性值只有这一个时生效
  • a[title~='value'] 同上，但是有多个的时候也有效
  • a[title$='value'] 以value开头，且对第一个才有效
  • a[title*='value'] 以value结束，且对最后一个才有效
  • a[title|='value'] 属性值只有一个的时候且为value，或者第一个属性为value-开头
avatar
文章
阅读
粉丝