css小笔记 样式类型，选择器类型，伪类选择器类型

    <!-- 第一种方式 使用外链(外部样式表)-->
    <link rel="stylesheet" type="text/css" href="01 style.css">
    <!-- 第二种方式 文档内嵌 使用style标签-->
    <style>
        h1{
            /*样式规则*/
             background-color: pink;
             text-decoration:
        }
    </style>
     <!-- 第三种方式 行内（内联）样式 使用style属性-->
    <p style="text-align: center">这是一个段落</p>

 

  <style>
          /*CSS相关的选择器{属性:属性值;}*/

         1.通配符选择器,作用于整个文档中所有元素 为文档设置默认样式
          *{
              background-color: gray;
              color: green;
          }

          2.元素选择器 用标签名表示 作用于名字为当前标签的所有元素
          p{
              color: blue;
          }

           3.id选择器 以#开头 加上自定义的id名称 一般是以字母开头 禁止使用下划线,数字开头
          #money1{
              color: red;
          }

          4.类选择器 以英文符号"."开头 加自定义类名
         .p1{
              background-color: pink;
          }

          5.属性选择器 属性名放在中括号 属性名=属性值
          [name=hehe]{
              color: red;
          }

          6.后代标签 用空格表示后代关系 两个标签之间的层次结构可以是无限的
          div ul li p{
              color:yellow;
          }

          可以跳过直接后代 结合使用  
          .div1 #li1 p{
              font-size: 30px;
          }

         7.子元素选择器 匹配某元素子元素的元素 元素直接的后代
          div>p{
              color: white;
          }

         8.相邻兄弟选择器 选择紧接在另一个元素后的元素,且二者有相同父元素 用+号表示相邻兄弟关系
          h3+p{
              color: skyblue;
          }

          9.序选择器 选择在父元素下的某个子元素
          div ul li:first-child{
              color: red;
          }
          div li:last-child{
              color:blue;
          }

          10.交集选择器 类选择器可以结合元素选择器来使用,形成交集选择器
          h3.h1{
              font-size: 30px;
             text-align: center;
          }

         元素选择器与id选择器一起使用 不能有空格
          h3#h3{
              background-color: pink;
          }

          11.组选择器
          h1,span,.p1{
              background-color: yellow;
              font-size: 20px;
          }
         

          a{
              font-size: 30px;
          }
          /*动态伪类 针对超链接不同状态下进行样式设置*/
          /*超链接未被访问过的颜色 默认蓝色*/
          a:link{
              color: purple;
          }
          /*设置被访问过后的样式*/
          a:visited{
            color: blue;
          }
          /*鼠标停留或经过链接时的设置*/
          a:hover{
              color: black;
          }
          /*激活状态下的样式*/
          a:active{
              color: yellow;
          }

          /*伪元素选择器*/
          p:before{
              content: "伟大的";
          }

          p:after{
              content: "see you";
          }

          p:first-line{
              color: red;
              font-size: 20px;
          }

          p:first-letter{
              color: orange;
              font-size: 30px;
          }

    </style>

/*样式规则的优先级 行内样式（元素内嵌）> 文档内嵌样式 > 外链样式 > 用户样式(属性样式) > 浏览器样式 */

/*具体到选择器内部的优先级 important > id选择器 > 类选择器 > 元素选择器*/