| 选择器 | 含义 | | --- | --- | | *{ } | 通用元素选择器，匹配任何元素 | | div{ } | 标签选择器，匹配所有div标签元素 | | .info{ } | class选择器，匹配所有class属性中包含info的元素 | | #foo{ } | id选择器，匹配所有id属性等于footer的元素 | | div,p{ } | 多元素选择器，同时匹配所有div元素或p元素，div和p之间用逗号分隔 | | div p{ } | 后代元素选择器，匹配所有属于div元素后代的p元素，div和p之间用空格分隔 | | div>p{ } | 子元素选择器，匹配所有div元素的子元素p | | div+p{ } | 毗邻元素选择器，匹配所有紧随div元素之后的同级元素p | | [title]{ } | 匹配所有具有title属性的元素，不考虑它的值） | | [alt='...']{ } | 匹配所有alt属性等于"..."的元素 | | [alt~='val']{ } | 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的元素 | | :first-child{ } | 匹配父元素的第一个子元素 | | :link{ } | 匹配所有未被点击的链接 | | :visited{ } | 匹配所有已被点击的链接 | | :active{ } | 匹配鼠标已经其上按下、还没有释放的元素 | | :hover{ } | 匹配鼠标悬停其上的元素 | | :focus{ } | 匹配获得当前焦点的元素 | | :lang(c){ } | 匹配lang属性等于c的元素 | | :first-line{ } | 匹配元素的第一行 | | :first-letter{ } | 匹配元素的第一个字母 | | :before{ } | 在元素之前插入内容 | | :after{ } | 在元素之后插入内容 | | div ~ p{ } | 匹配任何在div元素之后的同级p元素 | | \[att^="val"\]{ } | 匹配属性att的值以"val"开头的元素 | | \[att$="val"\]{ } | 匹配属性att的值以"val"结尾的元素 | | \[att\*="val"\]{ } | 匹配属性att的值包含"val"字符串的元素 | | :enabled{ } | 匹配表单中激活的元素 | | :disabled{ } | 匹配表单中禁用的元素 | | :checked{ } | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 | | ::selection{ } | 匹配用户当前选中的元素 | | :root{ } | 匹配文档的根元素，对于HTML文档，就是HTML元素 | | :nth-child(n){ } | 匹配其父元素的第n个子元素，第一个编号为1 | | :nth-last-child(n){ } | 匹配其父元素的倒数第n个子元素，第一个编号为1 | | :nth-of-type(n){ } | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 | | :nth-last-of-type(n){ } | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 | | :last-child{ } | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) | | :first-of-type{ } | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) | | :last-of-type{ } | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | | :only-child{ } | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | | :only-of-type{ } | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) | | :empty{ } | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 | | :not(s){ } | 匹配不符合当前选择器的任何元素 | | :target{ } | 匹配文档中特定"id"点击后的效果 |