1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     <!-- 选择器-基本选择器 -->
    10.       <!--
    11.                 基本选择器：
    13.            1. 标签名选择器：    标签名{声明;}           权重 1
    15.            2. 类选择器：        .class名{声明;}        权重 10
    17.            3. id选择器：        #id名{声明;}           权重 100
    19.              *权重问题：当操作相同的声明时，权重大选择器的会覆盖掉权重小的选择器。
    21.             *权重排序：
    22.                  标签名选择器 < 类选择器 < id选择器 < 行内样式表(1000) < !important(最大权重值)
    23.         -->
    24. </body>
    25. </html>
    

组合选择器：

        1.后代选择器                       父辈选择器 子辈选择器{声明;}

        2.子代选择器                       父选择器 > 子选择器{声明;}

        3.分组选择器                       选择器1,选择器2,选择器...{声明;}

        4.关联选择器                       标签名选择器.class类选择器{声明;}

        5.属性选择器                       标签名[属性名="属性值"]{声明;}(一般用于form表单较多)

             [属性名=属性值]{声明;}
             [属性名^=字母]{声明;}           属性值以...字母开始
             [属性名$=字母]{声明;}           属性值以...字母结束
             [属性名*=字母]{声明;}           属性值含有...字母

        6.后边紧挨着兄弟选择器               兄弟1+兄弟2{声明;}

        7.后边所有同辈兄弟选择器             兄弟1~兄弟2{声明;}

        8.伪类选择器(第几个)-ul              *只能在同级都是一样的标签情况下进行使用

             li:first-child{声明;}           第一个li
             li:last-child{声明;}            最后一个li
             li:nth-child(n){声明;}          第n个li

        9.伪类选择器(第几个)                 *数第几个标签

             标签名:first-of-type{声明;}      第一个标签
             标签名:last-of-type{声明;}       最后一个标签
             标签名:nth-of-type(n){声明;}     第n个标签

        10.a链接伪类选择器                    L-V-H-A

             a:link{声明;}                    新连接样式
             a:visited{声明;}                 旧链接样式
             a:hover{声明;}                   鼠标悬停的样式
             a:active{声明;}                  鼠标点击时的样式

             a{声明;}
             a:hover{声明;}