学习网页结构

伪类（不存在的类，特殊的类）
 定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，
不是固定某一定
例如：第一名，倒数第一名，鼠标悬浮，鼠标点击等

常见的伪类控制器
语法使用  :  开头
:first-child  第一个元素
:list-child  最后一个元素
:nth-child（）  选中第几个元素  
例如：nth-child（n）
     特殊值：2n或even表示偶数，2n+1或odd表示奇数
以上都是根据所有子元素进行排序

:first-of-type{}       第一个元素
:last-of-type{}        最后一个元素
:nth-of-type（）    选中第几个元素   
在同类型的子元素中去进行选择
例如：
li:first-child  就是li里第一个元素

二、not（）否定伪类
将符合条件的元素从选择器中去除

1、  :link{}       没有访问过的状态
2、  :visited{}  访问过的状态
3、  :hover{}  鼠标移入的状态
4、  :active{}  鼠标点击后的状态
注意：
①:link和:visoted 是a标签独有的伪类
②由于隐私问题，:link和:visited只能设置字体颜色
③:hover和:active  针对所有的元素

1、  ::first-letter{} 第一个字母
2、  ::first-line{}    第一行
3、  ::selection{}   选中的内容
4、  ::before{}    在元素的最前面      必须配合content样式名使用
                  例如：  p::before{content: ;}
5、  ::after{}       在元素的最后面    也必须配合content使用

样式的继承（继承祖先的资产）
定义：给父元素或者祖先元素设置有关样式，它会基础到子元素或后代元素上
优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整
注意：不是所有的样式都能继承，一般情况布局上样式

共同的祖先元素，设置统一的主体大小、字体颜色、行高、字体

样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，是看选择器的权重，谁的权重高，就有效果

选择题的权重          

                                                   (假设)
内联样式                                    1000
id选择器                                      100
class选择器/属性选择器               10
元素选择器                                     1        
通配选择器                                     0
继承样式                                     没有权重
注意：
1、如果选择器的权重一样，那么谁靠下，就谁生效
2、要让所有选择器的权重相加，谁大听谁的
3、所有的选择器权重相加，最高也不会超过上一等级的权重，如在多的类选择器相加，也不会超过id选择器权重
4、在并集选择器（群组选择器）当中，选择器权重是各算各的，最终谁大听谁的
5、！important  是最高的权重，但要慎用
    一般情况下，可以测试使用

如果样式设置不成功
①你没选中
②选择器的权重问题    用  ！important进行测试

元素分类
块元素
1、独占一行
2、宽度是其父元素或祖先元素内容区的宽度
3、高度是被内容撑开的
     可以自定义宽高

行内元素
1、不会独占一行
2、宽高都是被内容撑开的，行内元素不可以自定义宽高

行内块元素
兼具块元素和行内元素的特点，既不会独占一行，可以设置宽高

width设置元素宽度
height设置元素高度

display   实现元素之间的相互转换
可选值：
block  将元素转换成块元素
inline  将元素转换行内元素
inline-block 将元素转换成行内块元素
none  隐藏元素

a{text-decoration：none；}
去除a标签的下划线

h1{text-decoration：underline；}
增加下划线