选择器(&伪)/盒模型

  一.选择器高级

      1.组合选择器:
          /*群主选择器 : 同时可以控制多个选择器*/
          /*#dd,div,#a{}*/

      /*   d{ 起相同类名
              color: red;
          }*/
          举例:
          .d1,.d2,.d3{
              color: red
          }

      2.子代(后代)选择器:
          /*子代(后代)选择器 : 根据父子结构控制目标子标签*/
          /*明确选择器书写顺序: 目标inner, 再确定修饰词(哪个父亲,多少个父亲)*/
          /*语法:子代>连接*/
          举例:
          .sub .inner{
              color: green
          }
          .sub >.inner{
              color: pink
          }
          /*语法: 后代 空格连接:*/
          .sub .sub{
              color: red
          }

      3.相邻选择器:
          /*相邻选择器 : 根据兄弟控制目标下方兄弟标签*/
          /*明确目标 => 添加修饰词*/
          /*语法: 兄弟 ~ 连接*/
          举例:
          .ele1~.ele3{
              color: blue
          }
          /*语法:相邻 + 连接*/
          .ele1+.ele2{
              color: yellow
          }

      4.交集选择器:
          /*交集选择器 : 一个标签有多种选择器修饰,通过多种修饰找得一个目标标签*/
          举例:
           section#s.ss{
                  color: green
              }
      5.补充:
          /*注: 每一个选择器位均可以为三个基础选择器中任意一个*/

      6.html标签快捷生成式:
          6.1 <!-- .d${$$$}*3 -->
              <div class="d1">001</div>
              <div class="d1">002</div>
              <div class="d1">003</div>

          6.2 <!-- .sup>.sub>.inner -->
              <div class="sup">
                  <div class="sub">
                      <div class="inner">inner</div>
                  </div>
              </div>

          6.3  <!-- .ele${e$}*3 -->
              <div class="ele1">e1</div>
              <div class="ele2">e2</div>
              <div class="ele3">e3</div>

          6.4  <!-- (section.ss#s{块区域}+section.ss{块区域}+.ss{块区域}) -->
              <section class="ss" id="s">块区域</section>
              <section class="ss">块区域</section>
              <div class="ss">块区域</div>

  二. 复杂选择器的优先级

      1.与修饰符位置无关
      2,属性选择器与类选择器权重相同
      3.id 无限大于类(属性) 无限大于标签
      4.权重只与个数相关,个数(类型)均相同时,最后位置决定

      权重:
       <!-- 优先级取决于权重,其实就是比较个数 -->
          <!-- 1.不同的修饰符(后代/兄弟/交集...)均不影响权重 -->
          <!-- 3.权重只和个数有关 -->
          <!-- 4.id的权重无限大于class无限大于标签 -->
          <!-- 5.属性选择器的权重与类一样 -->
          <!-- 复习: 优先级来源(操作的是同一标签同一属性) -->

      举例:
      /*两个类名的选择器大于单个类名选择器*/
.d5{
   font-size: 20px;
}
[aa]{
   font-size: 50px;
}
/*模糊匹配*/
[aa*="b"]{
   font-size: 60px;
}
/*每个选择器位也可以替换为一个组合选择器*/
.d3.d5{
   font-size: 40px;
}

body > .d1.b2.d5{
   font-size: 50px;
}
/*.d1 div .d3.d5 优先级等于body > .d1.b2.d5 谁在下面谁起作用*/
.d1 div .d3.d5{
   font-size: 70px;
}
#div{
   font-size: 100px;
}

标签:
   <div class="d1">
              <div class="d2">
                  <div class="d3">
                      <div class="d4">
                          <div class="d5 aa="aa" id="div">12345</div>
                          <div class="d5 aa="bAAb">965746325</div>
                      </div>
                  </div>
              </div>
          </div>

  三. 伪类选择器

      1. a连接标签的四大伪类:
      操作的是a,伪类是修饰词,不影响优先级
      :hover (悬浮)
          /*链接被鼠标悬浮*/
          a：hover{
              color: green;
              /*鼠标样式 通用 pointer wait*/
              cursor: pointer;
          }

      :active (点击后)
          /*链接处于激活状态*/
          a:active{
              color: red;
          }

      :link ()
          a:link{
              color: red;
          }

      :visited()
          /*链接已经被访问过*/
          a:visited{
              color: #ccc
          }

      举例:
              section{
                  width: 100px;
                  height: 100px;
                  background-color: orange
              }

              /*同一结构下的第几个:先确定位置再匹配类型*/
              section:nth-child(3),section:nth-child(5){
                  background-color: red
              }

              a:nth-child(2){
                  color: yellow
              }

              /*同一结构下的某选择器的第几个: 先确定类型再匹配位置*/
              section:nth-of-type(1),section:nth-of-type(3){
                  background-color: cyan
              }

              /*取反*/
              section:not(:nth-of-type(2)){
                  background-color: pink
              }

      2. 位置相关
      :nth-child()|:last-child 先确定位置再匹配类型
          1. :nth-child 同一结构下的第几个:先确定位置再匹配类型
              举例:
              section:nth-child(3),section:nth-child(5){
                  background-color: red
              }

              a:nth-child(2){
                  color: yellow
              }

      :nth-of-type()先匹配类型再确定位置
          2. :nth-of-type 同一结构下的某选择器的第几个: 先确定类型再匹配位置
              举例:
           section:nth-of-type(1),section:nth-of-type(3){
                  background-color: cyan
              }

      取反 选择器 :not(修饰词)|div:not(:nth-of-type(2))
          3. :not 取反
              举例:
          section:not(:nth-of-type(2)){
                  background-color: pink
              }

  四. 盒模型

       margin+ border + padding + content (width * height)都具有自身区域
       margin参与布局 不参与盒子显示,其余都参加盒子显示
       border 颜色自身定义,padding和content颜色由背景色填充

            <!-- 什么是盒模型 : 通配选择器可以控制的页面标签都是盒模型(一般我们操作的是块级标签) -->
            <!-- 为什么使用盒模型 :页面书写的标签初始状态基本都不能满足要求,需要再次修改,修改的就是盒模型的各个属性 -->
            <!-- 盒模型的组成部分:margin(外边距)+boder(边框)+padding(内边距)+content(内容) -->
            <!-- 注意点: 1.四部分均具有自身独立区域
                           2.content=width*height,是子标签或子内容的显示区域 -->

            1./*content=width*height,颜色由背景色填充,参与盒子显示*/
                  .box{
                      width: 100px;
                      height: 100px;
                      background-color: red
                  }

            2./*padding:颜色由背景色填充,参与盒子显示*/
                  .box{
                      border: 10px solid black;
                  }

            3./*margin,没有颜色,不参与盒子显示,决定盒子布局(位置信息)*/
                  .box{
                      margin: 200px;
                  }

            4./*display中如果是inline */

            5.标签
                  <div class="box"></div>

       整体设置:
       padding : 上 右 下 左(无值取对边)

       分开设置:
       padding-top : 10px;
       padding-right : 10px;
       padding-bottom : 10px;
       padding-left : 10px;

       整体设置;
       border : 10px solid #af3;

       分开设置:
       border-top: 50px solid red;
       border-right: 50px solid pink;
       border-bottom: 50px solid orange;
       border-left: 50px solid blue;

  五.盒模型布局:
      完成自身布局:margin-left|margin-top
      上移|右移 : top取正值|left取正值
      下移|左移 : top取负值|left取负值

      举例:
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>盒模型布局</title>
          <style type="text/css">
              /*body默认有margin:8px,做项目时一定会清除*/
              /*清除系统默认(不喜欢)样式,该操作称之为reset操作*/
              body{
                  margin: 0;
              }
              /*block盒子,宽度自适应父级,高度由子级撑开*/
              .box{
                  height: 200px;
                  width: 200px;
                  background-color: orange;
              }
              .b1{
                  /*margin: 50px;*/
                  margin-top: 50px;
                  margin-left: 50px;
              }
              /*只有margin-left|top用于完成自身布局*/
              .b2{
                  /*水平居中:在父级水平居中*/
                  /*display: inline-block;*/
                  /*auto自适应剩余空白区域*/
                  margin-left: auto;
                  margin-right: auto;

                  /*实现居右50px*/
                  margin-left: auto;
                  margin-right: 50px;

                  /*b2上移与b1并排*/
                  margin-top: -200px
              }

              /*a标签的reset操作*/
              a{
                  color: black;
                  text-decoration: none;
              }
              /*h1标签的reset操作*/
              h1{
                  margin: 0;
              }

              /*margin-right|bottom影响兄弟布局*/
              .up{
                  /*bottom会影响之下的兄弟,往下挤*/
                  /*margin-bottom: 30px;*/
                  /*right会影响右方的兄弟,往右挤*/
                  /*margin-right: 30px;*/
              }
              .down{
                  /*上下兄弟的距离取最大值 => margin-top的坑*/
                  margin-top: 30px;
              }

          </style>
          <style type="text/css">
              .sup {
                  width: 200px;
                  height: 200px;
                  background-color: pink;
                  margin-top: 50px;
              }
              .sub {
                  /*父子top取最大值 => margin-top的坑(父级只与第一个子级联动)*/
                  width: 100px;
                  height: 100px;
                  background-color: brown;
                  margin-top: 50px;
              }
              /*拆散父子(第一子)*/
              /*1.设置父级的border-top即可*/
              /*2.或者设置父级的padding-top即可*/
          </style>
      </head>
      <body>
          <div class="box"></div>
          <a href="#">123</a>
          <h1>123</h1>
          <div class="box b1"></div>
          <div class="box b2"></div>

          <div class="up"></div>
          <div class="down"></div>
          <div class="sup">
              <div class="sub"></div>
          </div>
      </body>
      </html>