基本选择器
选择器 | 语法 |
---|---|
类型选择器 2 | elename |
类选择器 | .classname |
ID 选择器 | #idname |
通用选择器 | * |
属性选择器 | [attr] 选择存在 attr 属性的元素 < br ow="0" oh="0"> [attr=value] 选择 attr 属性为 value 的元素 < br ow="0" oh="0"> [attr~=value] 选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素 < br ow="0" oh="0"> [attr*=value] 选择 attr 属性的值中包含字符串 val 的元素 < br ow="0" oh="0"> [attr^=value] 选择 attr 属性的值以 val 开头(包括 val)的元素 < br ow="0" oh="0"> [attr$=value] 选择 attr 属性的值以 val 结尾(包括 val)的元素 < br ow="0" oh="0"> [attr|=value] 选择 attr 属性的值以 val 或 val - 开头的元素 |
关系选择器
选择器 | 语法 | 解释 |
---|---|---|
相邻兄弟选择器 | A+B | 匹配紧跟其 A 元素的兄弟元素 B |
一般兄弟选择器 | A~B | 匹配 A 元素后的兄弟元素中的 B 元素 |
子选择器 | A>B | 匹配 A 元素的子元素中的 B 元素 |
后代选择器 | A B | 匹配 A 元素的后代元素中的 B 元素 |
伪类选择器
伪类以一个冒号为前缀, 表示了在某种状态下的指定元素
选择器 | 解释 |
---|---|
:focus | 当元素获得焦点时选中 |
:link | 应用于 URL 尚未访问的链接 |
:hover | 应用于处于 “悬停状态” 的元素 |
:active | 应用于处于激活状态的元素 |
:visited | 应用于 URL 访问过的链接 |
:first-child | 元素作为第一个子元素时被选中 |
:first-of-type | 元素作为同类型的第一个子元素时被选中 |
:last-child | 元素作为最后一个子元素时被选中 |
:last-of-type | 元素作为同类型的最后一个子元素时被选中 |
:not(X) | 匹配不符合参数选择器 X 描述的元素, X 为简单的选择器 |
:nth-child(an+b) | 匹配在兄弟节点中的位置与模式 an+b 匹配的元素 |
:nth-of-type(an+b) | 匹配那些在它之前有 an+b-1 个相同类型兄弟节点的元素 |
:nth-last-child(an+b) | 和 :nth-child 一样,只是它从结尾处反序计数,而不是从开头处 |
:nth-last-of-type(an+b) | 和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处 |
:only-child | 作为父元素的唯一一个子元素被选中 |
:only-of-type | 没有同类型的兄弟元素时被选中 |
伪元素选择器
伪元素以两个冒号为前缀, 代表的是指定元素的某个部分实际上在 DOM 树中并不存在
选择器 | 解释 |
---|---|
::after | 创建一个伪元素,做为已选中元素的最后一个子元素 |
::before | 创建一个伪元素,做为已选中元素的第一个子元素 |
::first-line | 块级元素的第一行 |
::first-letter | 某块级元素第一行的第一个字母 (文字所处的行之前没有其他内容) |
::section | 文档中被选中的部分 |
来源: https://www.2cto.com/kf/201803/726975.html