CSS高级复杂选择器

兄弟选择器

  • 相邻兄弟选择器
    • 下一个紧挨着的元素,
    • 相邻元素的父元素要相同
    • 可以通过连加找到兄弟的兄弟元素
    • 链接符是 +
  • 通用兄弟选择器
    • 后面的所有指定元素
    • 两种元素必须拥有相同的父元素
    • 通过 ~链接

属性选择器

能够将元素附带的属性用于选择器中,从而对带有指定属性的元素设置样式
如 [title]:选择所有写了title的值,不管属性值是什么

伪类选择器

  • 目标伪类
    • :target 匹配设置锚点并处于活动状态的元素
  • 元素状态伪类
    • :enabled 匹配每个已启用的元素(大多数用在表单元素上)
    • :disabled 匹配每个被禁用的元素(大多数用在表单元素上)
    • :checked 匹配每个已被选中的input元素(只用于单选按钮和复选框)
  • 结构伪类
    • :first-child 匹配属于其父元素的首个子元素
    • :last-child 匹配属于父元素的最后一个子元素
    • :empty 匹配没有子元素(包括文本节点)的每个元素
    • :only-child 匹配属于其父元素的唯一子元素
    • :nth-child(n) 匹配父元素中第n个指定元素
  • 否定伪类
    • :not(selector) 匹配非指定元素/选择器的每个元素

伪元素选择器

  • first-letter用于选取指定选择器的首字母
    常用语排版细节,如首字母突出显示,下沉等
  • first-line用于选取指定选择器的首行
  • :selection用于匹配被用户选取的部分

你可能感兴趣的:(CSS高级复杂选择器)