升级的CSS之选择器
学习一下新的选择器
复合选择器
后代选择器
结构：选择器1 选择器2 { ... }
作用： 选择器1 所在的标签中找到满足 选择器2 的标签并设置样式
注意：后代包括：儿子、孙子.......。选择器与选择器之间通过 空格 隔开
子代选择器
结构： 选择器1 > 选择器2 { ... }
作用：选择器1 所在的标签中找到满足 选择器2 的标签并设置样式
注意：子代只包括儿子，子代选择器之间通过 > 来隔开
并集选择器
结构： 选择器1 , 选择器2 { ... }
作用: 找到满足选择器1或选择器2的标签并设置样式
注意：选择器之间用 , 隔开。可以是复合选择器也可以是基础选择器。
交集选择器
结构： 选择器1选择器2 { ... }
作用：找到同时满足选择器1和选择器2的标签并设置样式
注意：没有符号隔开，如果有标签选择器，必须写在最前面。
伪类选择器
结构： 选择器：hover { ... }
作用： 鼠标悬停在元素上的状态
元素显示模式
块级元素
特点：独占一行。宽度默认是父元素的宽度，高度默认随内容变化而变化。可以设置宽高
代表的标签：div、p、h、ul、li、form等
行内元素
特点：一行可以显示多个。宽度和高度默认随内容变化而变化，不可以设置宽高否则无效
代表的标签：a、span、em、strong等
行内块元素
特点：一行可以显示多个。可以设置宽高
代表的标签：input、textarea、button等
元素显示模式的转换
作用：改变元素默认的显示特点，让元素符合布局要求
语法：
- 转换为块级元素:display:block
- 转换为行内块元素:display:inline-block
- 转换为行内元素:display:inline
注意：
- p 标签不能嵌套 div 、p、h 等块级元素
- a 标签不能嵌套 a 标签
CSS的特性
继承性
子元素继承父元素的样式
常见的有：font系列、text-alig、line-height、color等
继承性失效
例如： a标签的color样式、h标签的font-size样式。浏览器的默认样式会覆盖所继承的样式。
层叠性
一个标签有很多不同的样式，则会共同作用这个标签 一个标签设置相同的样式，只有最后一个样式会起作用
选择器的优先级
不同的选择器有着不同的优先级，优先级高的则会覆盖优先级低的样式。
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id 选择器 < 行内样式 < !important
