「CSS」选择器

133 阅读4分钟

优先级

  • 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  • 作为style属性写在元素内的样式
  • id选择器
  • 类选择器
  • 标签选择器
  • 通配符选择器
  • 浏览器自定义或继承

权值计算

并不是十进制,一万个 class 也没有一个 id 优先级高

  • 内联样式表的权值为 1000
  • ID 选择器的权值为 100
  • Class 类选择器的权值为 10
  • HTML 标签选择器的权值为 1

选择器

基本选择器

  • * 通用元素选择器,匹配任何元素
  • tag 标签选择器,匹配所有使用 tag 标签的元素
  • .class class 选择器,匹配所有 class 属性中包含 class 的元素
  • #id id 选择器,匹配所有 id 属性等于 id 的元素

多元素的组合选择器

  • E,F 多元素,同时匹配所有 E 元素或者 F 元素,EF 之间用逗号分隔
  • E F 后代元素选择器,匹配所有属于 E 元素后代的 F 元素,EF 之间用空格分隔
  • E > F 子元素选择器,匹配所有 E 元素的子元素 F
  • E + F 毗邻元素选择器,匹配所有紧随 E 元素之后的同级元素 F
  • E ~ F 匹配任何在 E 元素之后的同级 F 元素

属性选择器

  • E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如"[cheacked]"。以下同。)
  • E[att=val] 匹配所有 att 属性等于 val 的元素
  • E[att~=val] 匹配所有 att 属性具有多个空格分隔的值、其中一个值等于valE元素
  • E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以val开头的E元素,主要用于lang属性,比如enen-usen-gb等等
  • E[att^=val] 匹配 att 属性以 val 开头的元素
  • E[att$=val] 匹配 att 属性以 val 结尾的元素
  • E[att*=val] 匹配 att 属性的值包含以 val 的元素

伪类

  • E:first-child 匹配父元素的第一个子元素
  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已被点击的链接
  • E:active 匹配鼠标已经按下,还没有释放的 E 元素
  • E:enbled 匹配表单中激活的元素
  • E:disabled 匹配表单中禁用的元素
  • E:checked 匹配表单中被选中的radiocheckbox元素
  • E:selection 匹配用户当前选中的元素

结构性伪类

  • E:root 匹配文档中的根元素,对于 HTML 文档,就是 HTML 元素
  • E:nth-child(n) 匹配其父元素的第 n 个子元素,第一个编号为 1
  • E:nth-last-child(n) 匹配其父元素的倒数第 n 个子元素,第一个编号为 1
  • E:nth-of-type(n):nth-child()作用类似,但是仅匹配使用同种标签的元素
  • E:nth-last-of-type(n):nth-last-child()作用类似,但是仅匹配使用同种标签的元素
  • E:last-child 匹配父元素的最后一个子元素,等同与:nth-last-child(1)
  • E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
  • E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
  • E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child:nth-child(1):nth-last-child(1)
  • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
  • E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

伪元素

  • E:first-line 匹配 E 元素的第一行
  • E:first-letter 匹配 E 元素的第一字母
  • E:beforeE 元素之前插入生成的内容
  • E:afterE 元素之后插入生成的内容

反选伪类

  • E:not(s) 匹配不符合当前选择器的任何元素

:target 伪类

  • E:target 匹配文档中特定id点击后的效果

阮一峰 CSS 选择器笔记