基础选择器
概念 | 描述 | 语法 |
---|---|---|
注释 | 单行与当行注释一样 | /* 注释 */ |
声明块 | 通过声明块来指定要为元素设置的样式 | { 样式内容:键:值; } |
选择器 | 通过选择器可以选中页面中的指定元素 | |
通配选择器 | 选中页面中的所有元素 | *{} |
标签选择器 | 根据HTML标签选中元素 | 标签名{} |
类选择器 | 根据元素的 class 属性值选中一组元素 | .类名 |
ID 选择器 | 根据元素的id 属性值选中一个元素 | #id名{} |
属性选择器 | 根据元素的属性值选中一组元素 | 标签[属性[=值]]{} |
交集选择器 | 选中同时复合多个条件的元素 | 选择器1 选择器2 选择器3 选择器n{} |
并集选择器 | 同时选择多个选择器对应的元素 | 选择器1,选择器2,选择器3,选择器n{} |
子元素选择器 | 选中指定父元素的指定子元素 | 父元素 > 子元素 |
后代元素选择器 | 选中指定元素内的指定后代元素 | 祖先 后代 |
兄弟元素选择器 | 选择下一个兄弟 | 前一个 + 下一个 前一个 + 下一组 |
伪类选择器
概念 | 语法 | 描述 |
---|---|---|
伪类 | 选择器:状态 | 用来描述一个元素的特殊状态,例如:被点击、鼠标移入 |
:first-child | 第一个子元素 | |
:last-child | 最后一个子元素 | |
:nth-child() | 选中第 n 个子元素 | |
:first-of-type | 同类型中的第一个子元素 | |
:last-of-type | 同类型中的最后一个子元素 | |
:nth-of-type() | 选中同类型中的第 n 个子元素 | |
:hover | 鼠标悬停时的链接 | |
:active | 鼠标点击时的链接 | |
:not() | 否定伪类,将符合条件的元素从选择器中去除 | |
:link | 未访问的链接 | |
:visited | 已访问的链接 |