選擇器(&僞)/盒模型

  一.選擇器高級      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>