1.复合选择器
有两个或者多个基础选择器,通过不同的方式组合而成。
目的是更加准确高效的选择目标元素(标签)
分类:
后代选择器:选中某个元素的所有后代元素
写法:父选择器 子选择器 {CSS属性},父子之间用空格隔开
子代选择器:选中某个元素的子代元素(最近的儿子)
选择器写法:父代选择器 > 子代选择器 {CSS属性},父子之间用>隔开
并集选择器:选择多组标签设置相同的样式
写法:选择器1,选择器2,选择器3.......选择器n {CSS属性},,选择器之间用,隔开
伪类选择器:伪类表示元素状态,可以选中元素的某个状态设置样式
鼠标悬停状态写法:选择器:hover{CSS属性}
2.CSS特性:继承性,层叠性,优先级
继承性:子级默认继承父级的文字控制属性。
层叠性:
相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加:不同的CSS属性都生效。
优先级:当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。
通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important
(选中标签的范围越大,优先级越低)
3.结构伪类选择器
根据标签的结构关系来查找标签
nth-child括号里面可以写公式,来多选
4.伪元素选择器
创建虚拟元素(伪元素),用来摆放装饰性的内容。
其实就是在一个标签内部再放置一个标签。
5.盒子模型
作用:布局网页,摆放盒子和内容。
盒子模型的构成:
内容区域:width,height
内边距:padding
边框线:border
外边距:margin(盒子外面)