屬性選擇器 可以不用藉助於類或者id選擇器 例：

/* 必須是input，但是同時具有value這個屬性，選擇這個元素 */
input[value] {
    color: skyblue;
}
/* 只選擇 type=text 文字框的input */
input[type=text] {
    color: pink;
}

結構偽類選擇器 例：

ul li:first-child {
    background-color: pink;
}
ul li:nth-child(3) {
    background-color: skyblue;
}

nth-child(n) 選擇某個父元素的一個或多個特定的子元素 n 可以是數字，關鍵字和公式 n 如果是數字，就是選擇第n個子元素,裡面數字從1開始 n 可以是關鍵字：even偶數，odd奇數 n 可以是公式：常見的公式如下(如果n是公式，則從0開始計算，但是第0個元素或者超出了元素的個數會被忽略) nth-child 與 nth-of-type 的區別 nth-child 對父元素裡面所有孩子排序選擇(序號是固定的)先找到第n個孩子，然後看看是否和E匹配 nth-of-type 對父元素裡面指定子元素進行排序選擇。先去匹配E，然後再根據E找第n個孩子 偽元素選擇器 ::before // 在元素內部的前面插入內容 ::after // 在元素內部的後面插入內容 before 和 after 建立一個元素，但是屬於行內元素 新建立的這個元素在文件樹中是找不到的，所以我們稱為偽元素 語法：element::before {} before和ater必須有 content 屬性 before在父元素內容的前面建立元素,，after在父元素內容的後面插入元素 偽元素選擇器和標籤選擇器一樣，權重為1 盒子模型 CSS3中可以通過 box-sizing 來指定盒模型,有2個值：即可指定為 content-box、border-box，這樣我們計算盒子大小的方式就發生了改變 可以分成兩種情況 box-sizing: content-box 盒子大小為 width + padding + border(以前預設的) box-sizing: border-box 盒子大小為 width，padding 和 border就不會撐大盒子了(前提 padding 和 border不會超過width寬度) 濾鏡filter 語法：選擇器 { filter: blur(5px); } blur數值越大越模糊 calc函式 在宣告CSS屬性值時執行一些計算 例：width: calc(100% - 80px); 括號裡可以使用 + - * / 來進行計算 過渡 誰做過渡給誰加 transition: 要過渡的屬性 花費時間 運動曲線 何時開始; 例：transition: all 2s; 過渡完成事件 transitionend 1.屬性：想要變化的css屬性，寬度高度背景顏色內外邊距都可以。如果想要所有的屬性都變化過渡,寫一個 all 就可以 2.花費時間：單位是秒(必須寫單位)比如0.5s 3.運動曲線：預設是ease(可以省略) 4.何時開始：單位是秒(必須寫單位)可以設定延遲觸發時間，預設是0s(可以省略) 運動曲線屬性值： linear # 勻速 ease # 逐漸慢下來 ease-in # 加速 ease-out # 減速 ease-in-out # 先加速後減速 2D轉換transform 可以實現元素的位移、旋轉、縮放等效果 常見屬性值： translate # 移動 rotate # 旋轉 scale # 縮放 translate 例：transform: translate(x,y); translate中的百分比單位是相對於自身元素的 不會影響到其他元素的位置 對行內元素沒有效果 可以用來實現盒子的水平和垂直居中 rotate 可以設定轉換中心點 例：transform: rotate(45deg); rotate裡面跟度數，單位是deg 角度為正時，順時針，負時，為逆時針 可以用來實現三角效果 scale 可以設定轉換中心點，並且不會影響其他盒子 例：transform: scale(x,y); transform: scale(1,1) # 寬和高都放大一倍，相當於沒有放大 transform: scale(2,2) # 寬和高都放大了2倍 transform: scale(2) # 只寫一個引數，則第二個引數和第一個引數一樣，等同於scale(2,2) transform: scale(0.5,0.5) # 縮小0.5倍 轉換中心點transform-origin 語法：transform-origin: x y; 注意後面的引數x和y用空格隔開 x，y預設轉換的中心點是元素的中心點（50% 50%） 還可以給x，y設定 畫素 或者 方位名詞（top bottom left right center） 複合寫法 語法：transform: translate() rotate() scale() ...等 其順序會影響轉換的效果 當同時有位移和其他屬性時，記得要將位移放到最前面 3D轉換 可以實現旋轉木馬等效果 三維座標系 x軸：水平向右 注意：x右邊是正值，左邊是負值 y軸：垂直向下 注意：y下面是正值，上面是負值 z軸：垂直螢幕 注意：往外面是正值，往裡面是負值 常見屬性值： translate3d(x,y,z) # 3D位移 rotate3d(x,y,z) # 3D旋轉 perspective # 透視 transform-style # 3D呈現 透視perspective 原理圖 透視寫在被觀察元素的父盒子上 d：就是視距，視距就是一個距離人的眼睛到螢幕的距離 z：就是z軸，物體距離螢幕的距離，z軸越大（正值）我們看到的物體越大 3D移動translate3d translform: translateX(100px) 僅僅是在x軸上移動 translform: translateY(100p×) 僅僅是在Y軸上移動 translform: translateZ(100p×) 僅僅是在Z軸上移動(注意：translateZ 一般用px單位) transform: translate3d(x,y,z) 其中x、y、z分別指要移動的軸的方向的距離 3D旋轉rotate3d 旋轉後的元素，三維座標系也會跟著旋轉 transform:rotateX(45deg) 沿著x軸正方向旋轉45度，正值“左手準則”，即往螢幕裡面倒 transform:rotateY(45deg) 沿著y軸正方向旋轉45deg，正值“左手準則”，即往螢幕右邊倒 transform:rotateZ(45deg) 沿著Z軸正方向旋轉45deg transform:rotate3d(x,y,z,deg) 沿著自定義軸旋轉deg為角度(瞭解即可) 例：transform:rotate3d(1,0,0,45deg) 沿著x軸旋轉45度 例：transform:rotate3d(1,1,0,45deg) 沿著對角線旋轉45度 3D呈現transform-style 控制子元素是否開啟三維立體環境 transform-style: flat 預設的，不開啟3d立體空間 transform-style: preserve-3d 開啟3d立體空間 這個屬性寫在父級，但是影響的是子盒子 動畫animation 可以實現大資料熱點動畫 元素可以新增多個動畫，同英文逗號 , 分隔 1.先定義動畫，用@keyframes(關鍵幀)定義動畫 關鍵詞 "from" 和 "to"，等同於 0% 和 100% 可以給動畫序列增加節點，如25%、50%、75%等

/* move 是自定義動畫名稱 */
@keyframes move {
    /* 0% 是開始狀態 */
    0% {
        width: 100px;
    }
    /* 100% 是結束狀態 */
    100% {
        width: 200px;
    }
}

2.呼叫動畫

div {
    /* 呼叫動畫，move是自定義好的動畫名稱 */
    animation-name: move;
    /* 動畫的持續時間 */
    animation-duration: 2s;
}

動畫屬性： animation-timing-function屬性值 linear # 勻速 ease # 逐漸慢下來 ease-in # 加速 ease-out # 減速 ease-in-out # 先加速後減速 steps() # 指定動畫分幾步完成 複合寫法 語法：animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態 簡寫屬性裡面不包含 animation-play-state 暫停動畫: animation-play-state: puased; 經常和滑鼠經過等其他配合使用 想要動畫走回來，而不是直接跳回來: animation-direction: alternate 盒子動畫結束後,停在結束位置: animation-fill-mode: forwards opacity 屬性 設定元素的不透明度 例：opacity:0.5; 漸變 背景線性漸變linear-gradient 背景漸變必須新增瀏覽器私有字首 起始方向可以是：方位名詞 或者度數，如果省略預設就是top

/* background: linear-gradient(起始方向, 顏色1, 顏色2); */
background: -webkit-linear-gradient(left, red, blue);
/* 對角：從左上角到右下角的線性漸變 */
background: -webkit-linear-gradient(left top, red, blue);
/* 從下到上，從藍色開始漸變、到高度40%位置是綠色漸變開始、最後以紅色結束 */
background: linear-gradient(0deg, blue, green 40%, red);

本文來自部落格園，作者：番薯吃地瓜，轉載請註明原文連結：https://www.cnblogs.com/sweet-potatos/p/15222791.html