选择器(&伪)/盒模型

  一.选择器高级      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>