块元素：（独占一行）
| div | p | h1~h6 | li |
|---|
div没有任何语意
内联元素：（只占本身大小）
| span | a | img | iframe |
|---|
span同div 一样没有任何语意
- a元素可以包含除它本身外的任何标签
- p元素可以包含除块元素外的任何元素
元素之间的关系：
| 父元素 | 子元素 | 祖先元素 | 后代元素 | 兄弟元素 |
|---|
- 后代元素选择器语法：祖先元素 后代元素{ }
如给祖先元素命名id的话则是：#祖先元素id名 后代元素{ } - 子元素选择器语法：父元素 > 子元素{ }
样式的继承：
子元素会继承父元素中的字号大小，背景、表框、定位不被继承
属性选择器：
| 选择器 | 语意 |
|---|---|
| <p title="哈哈">我是一个p段落</p> | （给文字设置提示语） |
| p[title]{color:red;} | （给具有title属性的p标签添加红色） |
| p[title="哈哈"]{color:red;} | （给具有title属性为哈哈的p标签添加红色） |
| p[title^="ab"]{color:red;} | （给title属性开头为ab的p标签添加红色） |
| p[title$="c"]{color:red;} | （给title属性结尾为c的p标签添加红色） |
| p[title*="c"]{color:red;} | （给title属性包含c的p标签添加红色） |
兄弟元素选择器:
| 选择器 | 语意 |
|---|---|
| span + p | span的后一个p标签。必须在span后边且是p元素 |
| span ~ p | span后所有p标签。只要是span后的p元素都会满足 |
选择器的优先级：
| 选择器 | 优先等级 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 100 |
| 类和伪类 | 10 |
| 元素选择器 | 1 |
| 通配* | 0 |
| 继承的样式 | 没有优先级 |
注
- 选择器内包含选择器时，优先等级相加
- 优先级一样时，后面的会把前面的覆盖
- 在样式后加 !inportant 会采用最高优先等级（比内联样式还高），故不推荐采取这种方法
