HTML5
CSS3选择器
css选择符
属性选择器
1 选择符[属性]{ } 当一个元素有当前属性才能匹配
2 选择符[属性="属性值"]{} 属性和属性值完全相同时才能匹配
3 选择符[属性~="属性值"]{} 属性值为一个词列表 属性值为任意一个就能进行匹配
4 选择符[属性^="属性值"]{} 属性值为字符 从第一个字符开始 比如 alt="boy" b bo 就能进行匹配
5 选择符[属性&="属性值"]{} 属性值为字符 从结尾匹配 比如 alt="boy" y oy 就能进行匹配
6 选择符[属性*="属性值"]{} 属性值包含的任一字符都能进行匹配
7 选择符[属性|="属性值"]{} 仅有一个属性值 或 第一个属性值为 属性值- 才能进行匹配
伪类选择器
结构伪类选择器
1 选择符:first-child 相同标签的结构会有一个虚拟的排列顺序 相同同级元素的第一个
2 选择符:last-child 相同标签的结构会有一个虚拟的排列顺序 相同同级元素的最后一个
3 选择符:nth-child(n) 第n个 也可以是even odd 2n 2n + 1
4 选择符:nth-last-child(n) 倒数第几个 倒序
5 选择符:only-child 仅有一个
1 选择符:first-of-type 不同标签在同级显示 定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
2 选择符:last-of-type 不同标签在同级显示 定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
3 选择符:nth-of-type(n) 不同标签在同级显示 定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
4 选择符:nth-last-of-type(n) 不同标签在同级显示 定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
5 选择符:only-of-type 不同标签在同级显示 定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
:root 定义根元素
:empty 定义空元素
目标伪类选择器
选择符:target 2d转换 匹配的元素被URL的相关指向
UI元素状态伪类
表单
1 :enabled 定义可用元素的
2 :disabled 定义禁止元素的
3 :checked 定义默认选定的
4 ::selection 定义文本选中的样式 不能设置宽高 可用改变字体颜色 和背景
动态伪类选择器
:link 未点击时的样式
:visited 点击过的样式
:hover 鼠标滑过的样式
:active 鼠标点击时的样式
:focus 聚焦时的样式
层级选择器
父子元素选择器 父元素>子元素 {}
兄弟选择器 子元素+子元素{} 相邻元素后面那个元素的样式
通用选择器 子元素~子元素 相邻元素后面那个元素的所有相同元素的样式
css选择符