前端三大件：
HTML：页面结构
CSS：页面样式
JavaScript：页面行为交互
CSS三大特性
继承：即子类元素继承父类的样式; 优先级：是指不同类别样式的权重比较; 层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。
选择器
- 标签选择器(如：body,div,p,ul,li)
- 类选择器(如：class=”head”,class=”head_logo”)
- ID选择器(如：id=”name”,id=”name_txt”)
- 全局选择器(如：*号)
- 组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
- 后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
- 群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
- 继承选择器(如：div p,注意两选择器用空格键分开)
- 伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
- 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
- 子选择器 (如：div>p ,带大于号>)
- CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
优先级
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
- 不同级别
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义或继承
!important > 行内样式(style="")>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 同一级别
同一级别中
后写的会覆盖先写的样式
简洁、高效的CSS
-
不要再ID选择器前使用标签名 解释：ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
-
不要在类选择器前使用标签名 解释：如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass{color:red;}
-
尽量少使用层级关系； #divclass p.colclass{color:red;} 改为 .colclass{color:red;}
-
使用类选择器代替层级关系（如上）
