共计 1166 个字符,预计需要花费 3 分钟才能阅读完成。
一、CSS 选择器 (基本、层级、属性、伪类、伪状态)
1. 基本选择器
* 通配符 / 全局选择器 *
* ID 选择器 #Id
* class 选择器 .classname
* 元素选择器 tagName
* 群组选择器 slecter,selecter 一起选
2. 层次选择器
* 后代选择器 selecter selecter
* 子元素选择器 selcter>selecter 只能是子元素 孙元素不算
* 相邻兄弟选择器 selecter+selecter 就下面的一个
* 通配兄弟选择器 selecter~selecter 下面的全部
3. 属性选择器
* selecter[attr] 包含 attr 属性的元素
* selecter[attr=val] arrt 属性值是 val 的元素
* seldcter[attr^=val] attr 属性值是以 val 开头的元素
* selecter[attr$=val] attr 属性值是以 val 结束的元素
* selecter[attr~=val] attr 属性值 val 或 包含 val(两个值以空格隔开,其中一个是 val) 所有的都算
* selecter[*=val] attr 属性值中包含 val 的元素 只要有这个字母就可以
* selecter[|=val] attr 属性值是 val 或值是 val=* 要么就 img 或者 img-pp
4. 伪类选择器
1) 动态伪类选择器
* :hover
* :link
* :visited
* :active
* :focus 焦点
2) 目标伪类选择器
* :target
3) 目标伪类选择器
* :target
4) 语言伪类选择器
* :lang()
5) UI 元素伪类选择器
* :enabled 能用 默认值
* :diabled
* checked 匹配这个元素
6) 结构伪类选择器
* :root 根元素选择器
* :first-child 匹配父元素的第一个子元素
* :last-child 最后一个
* nth-child(n) n 代表第几个
* nth-last-child(n) 最后几个
* only-child 只有一个的元素
* first-of-type 第一个类型
* last-of-type 最后一个类型
* nth-of-type()()代表第几个
* nth-last-of-type() 最后第几个
* only-of-type() 只有
* empty 匹配空的元素 (不能有子元素也不能有内容)
7) 否定伪类选择器
* not(selecter)
5. 伪元素选择器
* :first-letter / ::first-letter 第一个字母
* :first-line / ::first-line 第一行
* : before / ::before
* : after / ::after
* ::placeholder
* ::selection
CSS 常用样式属性
CSS3 过渡、变换、动画
3D 场景搭建与应用