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用于匹配被用户选取的部分
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,878评论 0 5
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 983评论 0 3
  • CSS选择器 1)标签选择器(标签) 语法: 元素名称{属性:属性值;...} 2)id选择器(#) 语法: ...
    xiaolizhenzhen阅读 582评论 0 0
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 889评论 0 1
  • 转载自牢记31种CSS选择器用法 1 * 星号选择器用于选取页面中的所有元素,可用于快速清除所有元素的 margi...
    Icestains阅读 1,292评论 0 1