摘要：前端知識點總結復雜選擇器兄弟選擇器兄弟元素具備相同父元素的平級元素之間稱為兄弟元素。

1.兄弟選擇器

 兄弟元素：具備相同父元素的平級元素之間稱為兄弟元素。
 1.相鄰兄弟選擇器
   作用：獲取緊緊挨在某元素后的兄弟元素
   語法：選擇器1+選擇器2{}
   注意：兄弟選擇器，只能向后找，不能向前找

 2.通用兄弟選擇器
   作用：獲取某元素后所有滿足條件的兄弟元素
   語法：選擇器1~選擇器2{}

2.屬性選擇器

 
 1.作用
   允許通過元素所附帶的屬性及其值來匹配元素
   type="text"
 
 2.語法
   1.基本語法
     [attr]  //屬性
 作用：匹配頁面中所有附帶attr屬性的元素
 ex：
   1.[id] 匹配頁面中所有附帶id屬性的元素
   2.[class] 匹配頁面中所有附帶class屬性的元素
   2.elem[attr]
     elem:表示任意元素
 attr:表示任意屬性
 作用：匹配頁面中所有附帶attr屬性的elem元素
 ex:
   div[id] 匹配頁面中所有帶有id屬性的div元素
   input[type] 匹配頁面中所有帶有type屬性的input元素
   .text[placeholder] 匹配頁面中所有帶有placeholder屬性，并有text類選擇器的元素
  
   3.[attr1][attr2]
     作用：匹配同時附帶多個屬性的元素
 ex:
   div[id][class]
   
   4.[attr=value]
     作用：匹配attr屬性值為value的元素
 ex:
   
   

    //匹配的是第一個input元素(以下三種寫法均可)
   input[type="text"] 
   input[type=text]
   input[type="text"]
   

3.偽類選擇器

 1.已學過的偽類
   鏈接偽類： 
     :link(尚未訪問)  :visited(訪問過的)
   動態偽類： 
     :hover(鼠標懸停) 
 :active(激活狀態)
 :focus(獲取焦點)

 2.目標偽類
   作用：突出顯示活動的HTML錨點元素，匹配被激活的錨點。
   語法：
     選擇器:target{...}
 div:target{...}
 #d1:target{...}
 
 3.結構偽類
  作用：通過元素的結構關系來匹配元素（上下級嵌套結構）
   1.:first-child
    匹配的元素屬于其父元素的第一個子元素

   
p1
   
p2
   
p3

ex：
  p:first-child{...} //找父元素的第一個子p元素(p1)

   2.:last-child
    匹配的元素是屬于其父元素的最后一個子元素
    ex:
     p:last-child{...}//找父元素的最后一個子元素（p3）
   
   3.:nth-child(n)
     匹配的元素是屬于其父元素中第n個子元素
     table tr:nth-child(2) 匹配表格第二行數據
    
   4.:empty
    匹配沒有子元素的元素

   
   5.:only-child
    匹配的元素是屬于其父元素中的唯一子元素

      
ppppp1
    

    

      
ppppppppp2
      ssssssss
    

    p:only-child{color:red;}//改變的是p1的顏色

     4.否定偽類
      將滿足指定選擇器的元素給排除出去（不要了，排除）
      語法：

     :not(selector)
   ex:
 table tr:not(:first-child){
   font-size:24px;
 }
     除第一行以外所有行的文字大小變為24px

4.偽元素選擇器

 1.:first-letter或::first-letter
   作用：匹配某個元素的首字符
 2.:first-line 或::first-line
   作用：匹配某個元素的首行（第一行）

   注意：首行與首字符沖突時，以首字符為準
 3.::selection
   匹配被用戶選取的內容
   注意：只能修改文本顏色或背景顏色
 

1.什么是內容生成

 使用CSS動態的向某元素中插入一段內容

2.偽元素選擇器

 1.:before或::before
   作用：匹配到某元素的內容區域之前
   
(:before)鵝鵝鵝
 2.:after或::after
   作用：匹配到某元素的內容區域之后
   
鋤禾日當午(:after)
 3.屬性
   屬性：content
   作用：向匹配到的位置處增加內容
   取值：
       1.字符串：用""引起來（普通文本）
   2.url()：生成一副圖像

 4.解決問題
   1.解決浮動問題
     div:after{
   content:"";
   display:block;
   clear:both;
 }
   2.子元素上外邊距溢出問題
     div:before{
   content:"";
   display:table;
 }

1.什么是彈性布局

彈性布局，是一種布局方式，注意解決某元素中“子元素”的布局方式，為布局提供最大的靈活性。

2.彈性布局的相關概念

1.彈性布局的容器
  彈性布局的容器 簡稱為"容器"（子元素的父元素，稱為容器）
2.彈性布局的項目
  彈性布局的項目 簡稱為"項目"(要實現布局效果的子元素，稱"項目")
3.主軸
  項目們排列方向的一根軸，就稱為主軸
  如果項目們按x軸排列（橫向排列），那么x軸就是主軸
  如果項目們按y軸排列（縱向排列），那么y軸就是主軸
4.交叉軸
  與主軸交叉的一根軸就是交叉軸
  如果主軸是x軸，那么y軸就是交叉軸
  如果主軸是y軸，那么x軸就是交叉軸

3.語法

1.flex容器
  將元素變為flex容器后，那么所有的子元素將變為flex項目，都允許按照彈性布局的方式排列
  如何將元素變為flex容器？
  屬性：display
  取值：
     1.flex:將快級元素變為容器
 2.inline-flex:將行內元素變為容器
注意：
  1.元素設置為flex容器之后，子元素的float,vertical-align,clear將失效
  2.容器的text-align將失效
2.容器的屬性
  1.flex-direction
    作用：指定容器的主軸及其排列方向
取值：
  1.row 默認值，即主軸為x軸，起點在左端
  2.row-reverse 主軸為x軸，起點在有端
  3.column 主軸為y軸，起點在頂端
  4.column-reverse 主軸為y軸,起點在底端
  2.flex-wrap
   作用：當一個主軸排列不下所有項目時，指定子項目如何換行
   取值：
      1.nowrap 默認值，即空間不夠時，也不換行，項目會自動縮小
  2.wrap 換行
  3.wrap-reverse 換行反轉
  3.flex-flow
   作用：是flex-direction和flex-wrap的縮寫形式
   取值：
      1.row nowrap 默認值
  2.direction wrap
  4.justify-content
   作用：定義項目在主軸上的對齊方式
   取值：
     1.flex-start
   在主軸的起點對齊
 2.flex-end
   在主軸的終點對齊
 3.space-between
   兩端對齊（常用）
 4.center
   在主軸上居中對齊
 5.space-around
   每個項目兩端間距相同
  5.align-items
   作用：定義項目在交叉軸上的對齊方式
   取值：
      1.flex-start
    交叉軸的起點對齊
  2.flex-end 
    交叉軸的終點對齊
  3.center
    交叉軸居中對齊
  4.baseline
    交叉軸上基線對齊
  5.stretch
    如果項目未設置尺寸，在交叉軸上將占滿所有空間

3.項目的屬性
  該組屬性只能設置在某一項目元素上，只控制一個項目，是不影響容器以其其它項目的效果。
  1.order
    作用：定義項目的排列順序，值越小，越靠近起點，默認值為0
取值：整數數字，無單位
  2.flex-grow
    作用：定義項目的放大比例，如果容器由足夠的剩余空間，項目將放大
取值：
  整數數字，無單位
  默認值0，不放大
  取值越大，占據的剩余空間就越多
  3.flex-shrink
    作用：定義項目的縮小比例，即容器空間不足時，項目該如何縮小
取值：
   默認值為1，空間不足時，則等比縮小
   取值為0，則不縮小（常用）
  4.align-self
    作用：定義當前項目在交叉軸上的對齊方式
取值：
   1.flex-start
   2.flex-end
   3.center
   4.baseline
   5.stretch
   6.auto (繼承自父元素的align-items屬性)

1.什么是轉換

改變元素在頁面中的位置，大小，角度以及形狀的一種方式。
  2D轉換:只在x軸和y軸上發生的轉換效果
  3D轉換:增加在z軸的轉換效果

2.轉換屬性

1.轉換屬性
  屬性：transform
  取值：
     1.none 默認值，無任何轉換效果
 2.transform-function
   表示1個或多個轉換函數
   如果是多個轉換函數的話，中間用空格隔開
2.轉換原點
  屬性：transform-origin
  取值：數字/百分比/關鍵字
       2個值：表示原點在x軸和y軸上的位置
   3個值：表示原點在x軸,y軸,z軸上的位置
  默認的原點在 元素的中心位置處
     (center center)
 (50% 50%)
3.2D轉換
  1.位移
    1.什么是位移
  改變元素在頁面中的位置
2.語法
 屬性：transform
 取值：
    1.translate(x)
      指定元素在x軸上的位移距離
      取值為正，元素向右移
      取值為負，元素向左移
    2.translate(x,y)
      指定元素在x軸和y軸的位移距離
      x:同上
      y:取值為正，元素向下移
        取值為負，元素向上移
    3.translateX(x)
      在x軸上的位移
    4.translateY(y)
      在y軸上的位移
  2.縮放
    1.什么是縮放
  改變元素在頁面中的尺寸
2.語法
  屬性：transform
  取值：
     1.scale(value)
       value:橫向或縱向的縮放比例
       value:默認值為1
             >1: 放大
         <1: 縮小
        負數：放大（水平和垂直都翻轉180度）
     2.scale(x,y)
       x:橫向的縮放比例
       y:縱向的縮放比例
     3.單向縮放函數
       scaleX(x)
       scaleY(y)
  3.旋轉
    1.什么是旋轉
  改變元素在頁面上的角度
2.語法
  屬性：transform
  取值：
     rotate(ndeg)
        n：取值為正，順時針旋轉
    n：取值為負，逆時針旋轉
    注意：
   1.轉換原點會影響最后的轉換效果
   2.旋轉是連同坐標軸一起旋轉的，會影響旋轉后的位移效果

2.語法
  屬性：transform
  取值：
     1.skewX(xdeg)
       讓元素向著x軸的方向產生傾斜效果，實際上改變的是y軸的傾斜角度值
       x：取值為正，y軸逆時針傾斜
       x：取值為負，y軸順時針傾斜
     2.skewY(ydeg)
       讓元素向著y軸的方向產生傾斜效果，實際上改變的x軸的傾斜角度值
       y:取值為正，x軸順時針傾斜
       y:取值為負，x軸逆時針傾斜
     3.skew(x)
        等同于skewX(xdeg)
     4.skew(x,y)   

4.3D轉換
  1.透視距離
    模擬人的眼睛到3D轉換元素之間的距離（z軸）
屬性：perspective
注意：該屬性要加在3D轉換元素的父元素上
  2.3D旋轉
    屬性：transform
取值：
  1.rotateX(xdeg)
    以x軸為中心軸，旋轉元素的角度
    取值為正，順時針旋轉
  2.rotateY(ydeg)
    以y軸為中心，旋轉元素的角度
  3.rotateZ(zdeg)
    以z軸為中心，旋轉元素的角度
  4.rotate3D(x,y,z,ndeg)
    x,y,z取值大于0的數字時，表示該軸要參與旋轉，取值為0則不參與旋轉
    rotate3D(1,0,0,45deg)只在x軸旋轉45度
    roatate3d(1,1,1,0deg)

1.什么是過渡

使得css屬性值，在一段時間內平緩變化的效果

2.過渡語法

1.指定過渡屬性
  屬性：transition-property
  取值：
     1.all 能使用過渡的屬性，一律用過渡體現
 2.具體屬性名
   ex:
   transition-property:background
   當背景的屬性在發生變化時用過渡給體現出來
   transition-property:border-radius;
   當邊框倒角在發生改變時用過渡體現出來
   transition-property:all 
   允許設置過渡效果的屬性：
      1.顏色屬性（背景,文字,邊框顏色,陰影顏色）
      2.取值為數字的屬性（高寬，內外邊距等）
      3.轉換屬性（位移，旋轉，縮放，傾斜）
      4.陰影屬性
      5.漸變屬性
      6.visibility屬性
2.指定過渡時長
  作用：指定在多長時間內完成過渡操作
  屬性：transition-duration
  取值：
    以s或ms為單位的數值
1000ms=1s
3.指定過渡速度時間曲線函數
  屬性：transition-timing-function
  取值：
     1.ease 默認值，慢速開始，快速變快，慢速結束
 2.linear 勻速
 3.ease-in 慢速開始，加速結束
 4.ease-out 快速開始，慢速結束
 5.ease-in-out 慢速開始和結束，中間先加速后減速
4.指定過渡延遲時間
  屬性：transition-delay
  取值：以s或ms為單位的數值

5.過渡屬性的編寫位置
  1.將過渡放在元素聲明的樣式中
    既管去，又管回
  2.將過渡放在觸發的操作中（hover）
    只管去，不管回
6.過渡的簡寫形式
  transition:property duration timing-function delay;
  ex:
    transition:background 2s ease,border-radius 2s;
    transition:all 2s; //上面的簡寫

1.什么是動畫

使元素從一種樣式逐漸變為另一種樣式
即將多個過渡效果放下一起
動畫是通過"關鍵幀"，來控制動畫的每一步
關鍵幀：
   1.定義動畫執行的時間點
   2.在該時間點上的樣式是什么

2.動畫的使用步驟

1.聲明動畫
  為動畫起名
  定義關鍵幀
2.為元素調用動畫
  指定元素調用的動畫名稱以及各個參數屬性
3.定義動畫（聲明動畫）
  @keyframes 動畫名稱{
     /*定義該動畫中所有的關鍵幀*/
 0%{
    /*動畫開始時元素時的樣式*/
 }
 25%{
    /*動畫執行到1/4時的樣式*/
 }
 50%{
   /*動畫執行到一半時的樣式*/
 }
 75%{
    /*動畫執行到3/4時的樣式*/
 }
 100%{
   /*動畫執行結束時的樣式*/
 }
  }
4.動畫調用（動畫屬性）
  1.animation-name
    作用：指定調用動畫的名稱
  2.animation-duration
    作用：指定動畫執行一個周期的時長
取值：以s或ms為單位的數值
  3.animation-timing-function
    作用：指定動畫的速度時間曲線函數
取值：ease,linear,ease-in,ease-out,ease-in-out
  4.animation-dealy
    作用：指定動畫的延遲時間
取值：以s或ms為單位的數值
  5.animation-iteration-count
    作用：指定動畫的播放次數
取值：
  1.具體數字
  2.infinite 無限次數播放
  6.animation-diretion
    作用：指定動畫的播放方向
取值：
  1.normal 
    默認值，正常播放0%-100%
  2.reverse
    逆向播放 100%-0%
  3.alternate
    輪播播放
     奇數次數播放時，正向播放
     偶數次數播放時，逆向播放
  7.動畫的簡寫方式
    animation:name duration timing-function delay iteration-count direction;
  8.animation-fill-mode
    作用：規定動畫在播放前或播放后的狀態
取值：
  1.none 默認值
  2.forwards 
    動畫播放完成后，將保持在最后一個幀狀態
  3.backwards
    動畫播放前，延遲時間內，動畫保持在第一個幀的狀態上
  4.both
    forwards與backwards的合體
  9.animation-paly-state
    作用：指定動畫處于播放還是暫停的狀態
取值：
   1.paused 暫停
   2.running 播放
  

1.解決問題

解決IE瀏覽器兼容性問題
解決辦法：針對不同瀏覽器編寫不同CSS代碼

2.CSSHack 的原理

使用CSS樣式的優先級解決兼容性問題

3.CSSHack的實現方式

1.CSS類內部Hack
  在樣式屬性名稱前或屬性值后增加前后綴，以便于識別不同瀏覽器
  +:IE6,7的前綴
  -:IE6的前綴