好好學習，天天向上

本章主要內容為：CSS3 新增選擇器(子級、兄弟、結構偽類、偽元素、屬性)、CSS3盒模型、CSS3邊框、文字陰影、邊框陰影、過渡屬性、2D轉換、3D轉換

一、CSS3 新增選擇器

Ⅰ、子級選擇器

• 子級選擇器用于選取帶有特定父元素的元素
• 書寫語法：element1 > element2
• 注意：如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇
• > 符號之前書寫父級的選擇器，> 符號之后寫子級選擇器，必須滿足父子級關系才能選中標簽

.box > p {background-color: orange; }.inner > p {background-color: palegreen; }p {background-color: peru; }<div class="box"><p> 這是 box 中的 p 標簽 </p><p> 這是 box 中的 p 標簽 </p><div class="inner"><p> 這是 inner 中的 p 標簽 </p></div> </div><p> 這是單獨的 p 標簽 </p>

示例圖：

Ⅱ、兄弟選擇器

選擇器簡介

element1 + element2	匹配同一個父元素中緊跟在element1后面的一個element2元素
element1 ~ element2	匹配同一個父元素中在element1后面的所有element2元素

相鄰兄弟選擇器

• 相鄰兄弟選擇器可以用于選擇緊接在另一個元素后的兄弟元素，而且二者有相同的父元素
• 書寫語法：element1 + element2

注意：

• 選中的是緊跟在 element1 之后的同級元素 element2
• 只能選中緊跟在后面的一個 element2 元素
• 二者有相同的父元素
• + 符號前后可以添加空格書寫

<style> /* 意思就是選中 box1 內部的 h1 后面的第一個滿足 p 的條件*/ .box1 h1 + p {background-color: peru; } </style><div class="box1"><h1> 一級標題 </h1><p> 段落1 </p><p> 段落2 </p><p> 段落3 </p><p> 段落4 </p> </div>

示例圖：

其他兄弟選擇器

• 其他兄弟選擇器匹配同一個父元素中在 element1 后面的所有 element2 元素
• 書寫語法：element1 ~ element2

注意：

• 選擇 element1 之后出現的所有 element2
• 兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1
• ~ 符號前后可以添加空格書寫

.box1 h1 ~ p {background-color: peru; }

Ⅲ、結構偽類選擇器

選擇器簡介

E:first-child	匹配父元素中的第一個子元素E
E:last-child	匹配父元素中最后一個E元素
E:nth-child(n)	匹配父元素中的第n個子元素E
E:first-of-type	指定類型E的第一個
E:last-of-type	指定類型E的最后一個
E:nth-of-type(n)	指定類型E的第n個

nth-child（n）

• n 可以是數字，關鍵字和公式
• n 如果是數字，就是選擇第 n 個
• 常見的關鍵詞 even 偶數 odd 奇數
• 常見的公式如下 ( 如果 n 是公式，則從 0 開始計算，n是從 0 ，1，2，3… 一直遞增）
• 但是第 0 元素或者超出了元素的個數會被忽略

公式取值

2n	偶數
2n+1	奇數
5n	5 10 15 ……
n+5	從第5個開始（包含第5個）到最后，5 6 7 8 9 ……
-n+5	前5個（包含第5個），5 4 3 2 1 0……

.box1 :first-child {background-color: pink; } .box1 :last-child {background-color: purple; } .box1 :nth-child(4) {background-color: rgb(102, 99, 99); }/* .box1 p:nth-child(odd) {background-color: violet; } *//* .box1 p:nth-child(3n) {background-color: violet; } *//* .box1 p:nth-child(n + 4) {background-color: violet; } */.box1 p:first-of-type {background-color: royalblue; } .box1 p:last-of-type {background-color: seagreen; } .box1 p:nth-of-type(3) {background-color: springgreen; }<div class="box1"><!-- <p> 段落 </p> --><h1> 一級標題 </h1><h1> 一級標題 </h1><p> 段落1 </p><p> 段落2 </p><p> 段落3 </p><p> 段落4 </p><h1> 一級標題 </h1> </div>

E:nth-child(n) 和 E:nth-of-type(n) 的區別

• E:nth-child(n) 匹配父元素的第 n 個子元素 E，同時需要滿足兩個條件
• E:nth-of-type(n) 匹配同類型中的第 n 個同級兄弟元素 E，會忽視其他同級的非同類型元素

Ⅳ、偽元素選擇器

新增偽元素

選擇器介紹

E::before	在 E 元素內部的前面插入一個元素
E::after	在 E 元素內部的后面插入一個元素
E::first-letter	選擇到了 E 容器內的第一個字母
E::first-line	選擇到了 E 容器內的第一行文本

* {margin: 0;padding: 0; } .box {width: 400px;padding: 10px;border: 2px solid black; } .box p {width: 50px;height: 50px;margin-bottom: 10px;background-color: blue; }/* 給 box 盒子內部添加偽元素 */ .box::before {content: "1";display: block;height: 50px;background-color: orange; } .box::after {content: "2";display: block;height: 50px;background-color: orange; } .p1::first-letter {color: red; } .p2::first-line {color: red; }<div class="box"><p class="p1"> 這是一個段落</p><p class="p2">這是一個段落</p><p></p><p></p> </div>

示例圖：

h5 寫法和傳統寫法區別

• 單冒號 E:before
• 雙冒號 E::before
• 瀏覽器對以上寫法都能識別，雙冒號是 h5 的語法規范

偽元素的注意事項

• 偽元素只能給雙標簽添加，不能給單標簽添加
• 偽元素的冒號前不能有空格，如 E ::before 這個寫法是錯誤的
• 偽元素里面必須寫上屬性 content: “” ;
• before 和 after 創建一個元素，但是屬于行內元素
• 因為在 DOM 里面看不見剛才創建的元素，所以我們稱為偽元素

Ⅴ、屬性選擇器

屬性選擇器用來選擇包含指定屬性的標簽

選擇器簡介

E[att]	選擇具有att屬性的E元素
E[att=“val”]	選擇具有att屬性且屬性值等于val的E元素
E[att^=“val”]	匹配具有att屬性、且值以val開頭的E元素
E[att$=“val”]	匹配具有att屬性、且值以val結尾的E元素
E[att*=“val”]	匹配具有att屬性、且值中含有val的E元素

/* input[name] {width: 30px;height: 30px; } *//* input[type="checkbox"] {width: 30px;height: 30px; } *//* input[class^="icon"] {width: 30px;height: 30px; } */ /* input[class$="dan"] {width: 30px;height: 30px; } */ input[type*="o"] {width: 30px;height: 30px; }<p><input type="radio" name="sex" class="icon-dan"> 男性<input type="radio" name="sex" class="icon-dan"> 女性 </p><p><input type="checkbox" class="icon-duo"> 第一<input type="checkbox" class="icon-duo"> 第二 </p>

選擇器權重

• 基礎選擇器：id 選擇器 > 類選擇器 > 標簽選擇器 > *
• 偽類選擇器、屬性選擇器的權重等于類選擇器
• 偽元素選擇器的權重等于標簽選擇器

---

二、CSS3 盒模型

• CSS3 中可以通過 box-sizing 來指定盒模型，這樣我們就可以設置如何計算一個元素的總寬度和總高度

屬性值簡介

content-box	默認值，標準盒子模型，盒模型是外擴的 width 與 height 只包括內容的寬和高 在 width 和 height 之外繪制元素的內邊距和邊框
border-box	怪異模式，盒模型是內減的 width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距 為元素指定的任何內邊距和邊框都將在已設定的 width 和 height 內進行繪制

content-box 標準模式

• Standard 模式：標準模式中，盒子總體大小為 width(height) + padding + border，內容區域是 width 和 height 部分

border-box 怪異模式

• Quirks 模式：怪異模式中，盒子總體大小為 width 和 height，添加了padding和border后， 內容區域會收縮

* {margin: 0;padding: 0; }div {width: 100px;height: 100px;padding: 10px;border: 10px solid red;background-color: orchid;} .box1 {box-sizing: content-box; }.box2 {box-sizing: border-box;}

示例圖：

---

三、CSS3 新增屬性

Ⅰ、邊框圓角

• 屬性名：border--radius
• 作用：設置邊框的圓角
• 屬性值：可以是像素值，或者百分比，百分比參考的是盒子整體寬度、高度的百分比

屬性值說明

x-radius / y-radius	/ 分割兩部分屬性值，前面為水平半徑，后面為垂直半徑， 得到的是橢圓角
radiu	一個屬性值，則水平和垂直都設置為同一個值，得到的是圓角

單一屬性

• border-top-left-radius: 半徑;
• border-top-right-radius: 半徑;
• border-bottom-right-radius: 半徑;
• border-bottom-left-radius: 半徑;

border-top-left-radius: 50px;

簡寫方法

• border-radius 相當于四個單一屬性的簡寫方法，類似 padding 也可以有四種值的寫法
• border-radius: 左上角 右上角 右下角 左下角;
• border-radius: 左上角 右上角 和 左下角 右下角;
• border-radius: 左上角 和 右下角 右上角 和 左下角;
• border-radius: 四個角相同;

border-radius: 10px 20px 30px 40px;

/ 的屬性值寫法

• border-radius 屬性值中出現了 / 斜線，那么 / 前面可以設置水平方向四種值的寫法，/ 后面可以設置垂直方向四種值的寫法

.box1 {border-radius: 10px 20px 40px / 50px 60px; } .box2 {border-radius: 10px 20px 40px; }

示例圖：

Internet Explorer 8 及以下版本瀏覽器不支持border-radius屬性，其他瀏覽器都支持

Ⅱ、文字陰影

• 在 CSS3 中，text-shadow 可向文本應用陰影，通過屬性值能夠規定水平陰影、垂直陰影、 模糊距離，以及陰影的顏色

屬性值簡介

h-shadow	必需，水平陰影的位置，允許負值
v-shadow	必需，垂直陰影的位置，允許負值
blur	可選，模糊的距離
color	可選，陰影的顏色

文字陰影語法

• text-shadow 屬性向文本添加陰影，屬性值有2-3個長度值和一個可選的顏色值進行規定，省略的長度是 0

.word {margin: 50px;font: bold 30px/60px "楷體";/* 文字陰影： 水平位置 垂直位置 模糊程度 顏色 */text-shadow: 3px 3px 5px #f00; }

示例圖：

多層陰影

• text-shadow 屬性也可以向文本添加多個陰影，逗號分隔多個陰影的屬性值
• 注意：多陰影中，先寫的陰影壓蓋在后寫的陰影上

.word {margin: 50px;font: bold 30px/60px "楷體";/* 文字陰影： 水平位置 垂直位置 模糊程度 顏色 */text-shadow: 3px 3px 5px #f00,6px 6px 5px steelblue,9px 9px 5px orangered }

示例圖：

Ⅲ、邊框陰影

• CSS3 中，box-shadow 屬性用于對盒子邊框添加陰影

屬性值簡介

h-shadow	必需，水平陰影的位置，允許負值
v-shadow	必需，垂直陰影的位置，允許負值
blur	可選，模糊距離
spread	可選，陰影的尺寸
color	可選，陰影的顏色
inset	可選，將外部陰影改為內部陰影

邊框陰影語法

• box-shadow 屬性向盒子添加陰影，屬性值有 2-4 個長度值、可選的顏色值以及可選 的 inset 關鍵詞來規定，省略的長度是 0

.box2 { /* 邊框陰影： 水平位置 垂直位置 模糊程度 擴展大小 顏色 是否內邊框陰影 inset */box-shadow: 10px 10px 5px 10px slateblue ; }

多層陰影

• box-shadow 屬性也可以向盒子添加多個陰影，逗號分隔多個陰影的屬性值
• 注意：多陰影中，先寫的陰影壓蓋在后寫的陰影上

.box2 {/* 邊框陰影： 水平位置 垂直位置 模糊程度 擴展大小 顏色 是否內邊框陰影inset */box-shadow: 10px 10px 5px 10px slateblue ,20px 20px 5px 10px red ; }

Ⅳ、過渡屬性

• 屬性名：transition
• 作用：在不使用 Flash 動畫 或 JavaScript 的情況下，使用 transition 可以實現補間動畫（過渡效果）， 并且當前元素只要有“屬性”發生變化時即存在兩種狀態(我們用 A 和 B 代指），那么 A 和 B 之間就可以實現平滑的過渡的動畫效果，為了方便看效果，我們使用 :hover 切換狀態
• 語法格式： transition: 過渡的屬性 過渡時間 運動曲線 延時時間;

屬性描述

transition	簡寫屬性，用于在一個屬性中設置四個過渡屬性
transiton-property	規定應用過渡的 CSS 屬性的名稱
transition-duration	定義過渡效果花費的時間，默認是 0
transition-timing-function	規定過渡效果的時間曲線，默認是 “ease”
transition-delay	規定過渡效果何時開始，默認是 0

transition-property 過渡的屬性

• none 表示沒有屬性過渡
• all 表示所有變化的屬性都過渡
• 屬性名使用具體的屬性名，多個屬性名中間逗號分隔

時間

• 過渡時間：以 s 秒為單位
• 延時時間：以 s 秒為單位，0 s也必須加單位

transition-timing-function 時間曲線

值描述

linear	規定以相同速度開始至結束
ease	規定慢速開始，然后變快，然后慢速結束
ease-in	規定以慢速開始
ease-in-out	規定以慢速開始和結束的過渡效果
cubic-bezier(x1,y1,x2,y2)	在 cubic-bezier 函數中定義自己的值，x1、x2取是 0 至 1 之間的數值， y1、y2取值任意，四個數值表示拉扯的點的兩個坐標

貝塞爾曲線

示例:

.box {width: 100px;height: 100px;margin: 10px;background-color: skyblue;/* 過渡屬性：屬性 過渡時間 時間曲線 延遲時間 */transition: all 2s linear 2s; } .box:hover{width: 300px;height: 300px; }

示例圖：

Ⅵ、2D轉換

• 屬性名：transform
• 作用：對元素進行移動、縮放、旋轉、拉長或拉伸，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠 Flash 才可以實現的效果
• 屬性值：多種轉換方法的屬性值，可以實現不同的轉換效果

位移 translate()

• transform 的屬性值為 translate() 時，可以實現位移效果

值說明

translate(x,y)	x,y 分別為水平和垂直方向位移的距離，可以為 px 值或百分比， 區分正負
translate(x)	只有一個數值，表示水平方向的位移

* {margin: 0;padding: 0; } .box {width: 222px;height: 222px;margin: 100px auto;border: 2px solid red; }.box img {transform: translate(30px,30px); }.box2 {position: relative;width: 500px;height: 100px;border: 2px solid black; } .box2 p {position: absolute;left: 50%;width: 100px;height: 100%;transform: translate(-50%);background-color: coral; }<div class="box"><img src="images/lagouwang.jpg" alt=""> </div><div class="box2"><p> 設置居中</p> </div>

示例圖：

縮放 scale()

• transform 的屬性值為 scale() 時，可以實現元素縮放效果

值說明

scale(x, y)	x,y 分別為改變元素的寬度和高度的倍數
scale(n)	只有一個值，表示寬度和高度同時縮放n倍
scaleX(n)	改變元素的寬度
scaleY(n)	改變元素的高度

.box img {transform: scale(1,0.5); }

旋轉 rotate()

• transform 屬性值設置為 rotate() 時，實現元素的旋轉
• rotate(數字deg)
• 其中，deg為度數單位，正數表示順時針旋轉，負數表示逆時針旋轉。2D的旋轉只有 一個屬性值
• 元素旋轉后，坐標軸也跟著發生轉變
• 多個屬性值同時設置給 transform 時，書寫順序不同導致的轉換效果有差異

.box img {/* 旋轉 */transform: rotate(20deg);/* 先位移后旋轉 *//* transform: translate(100px) rotate(20deg); *//* 先旋轉后位移 *//* transform: rotate(20deg) translate(100px); */}

傾斜 skew()

• transform 屬性值設置為 skew() 時，實現元素的傾斜
• transform: skew(數字deg,數字deg)
• 兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個數值不寫默認為0

.box img {transform: skew(20deg); }

transform-origin 屬性

• 作用：設置調整元素的水平和垂直方向原點的位置
• 調整元素的基準點
• 屬性值：包含兩個，中間使用空格分隔

值說明

x	定義 x 軸的原點在何處，可能的值：left 、center、right、像素值、百分比
y	定義 y 軸的原點在何處，可能的值：top、center、bottom、像素值、百分比

.box img {transform-origin: left 50%;transform: rotate(20deg); }

示例圖：

Ⅶ、案例-2D轉換卡包特效

效果圖：

代碼地址：

01-02-task -materials/2D轉換-卡包特效案例.html · 吳騰輝/前端案例和應用源碼 - Gitee.com?gitee.com

Ⅷ、3D 轉換

透視屬性 perspective

• 屬性名：perspective
• 作用：設置在 z 軸的視線焦點的觀察位置，從而實現 3D 查看效果
• 屬性值：像素值，數值越大，觀察點距離 z 軸原點越遠，圖形效果越完整且接近原始尺寸
• 注意：透視屬性需要設置給 3D 變化元素的父級

.box {width: 222px;height: 222px;margin: 100px auto;border: 2px solid red;perspective: 500px; }.box img {transition: all 1s ease; } .box img:hover {transform: rotateX(60deg); }

3D 旋轉

• 3D旋轉比2D旋轉更復雜，需要分別對三個方向的旋轉角度值

值說明

rotateX(angle)	定義沿著 X 軸的 3D 旋轉
rotateY(angle)	定義沿著 Y 軸的 3D 旋轉
rotateZ(angle)	定義沿著 Z 軸的 3D 旋轉

• 屬性值的角度區分正負，正數表示沿對應坐標軸順時針方向旋轉，負數表示沿對應坐標軸逆時針 方向旋轉

.box img {transition: all 1s ease; } .box img:hover {transform: rotateX(60deg);/* transform: rotateY(60deg);transform: rotateZ(60deg); */ }

3D 位移

• 類似的，位移也分為三個方向的移動

值說明

translateX(x)	設置 X 軸的位移值
translateY(y)	設置 Y 軸的位移值
translateZ(z)	定義3D位移，設置Z軸的位移值

.box img:hover {transform: translateX(50px);/* transform: translateY(50px);transform: translateZ(50px); */ }

示例圖：

Ⅸ、3D案例-正方體

• transform-style屬性
• 用于設置被嵌套的子元素在父元素的 3D 空間中顯示，子元素會保留自己的 3D 轉換坐標軸

屬性值：

flat：所有子元素在 2D 平面呈現

preserve-3d：保留 3D 空間

• 3D 元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設置 transform-style: preserve-3d，來使其變成一個真正的 3D 圖形
• 一般來說，該屬性設置給 3D 變換圖形的父級元素

效果圖：

代碼地址：

01-02-task -materials/3D正方體案例.html · 吳騰輝/前端案例和應用源碼 - Gitee.com?gitee.com

Ⅹ、動畫

css3 動畫制作分為兩步：創建動畫、綁定動畫

@keyframes 規則

• @keyframes 規則用于創建動畫
• 在 @keyframes 中規定某項 CSS 樣式，就能創建由從一種樣式逐漸變化為另一種樣式的效果
• 可以改變任意多的樣式任意多的次數
• 需要使用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to” ，等同于 0% 和 100%
• 0% 是動畫的開始，100% 是動畫的完成

@keyframes 書寫方法

@keyframes 動畫名稱 { 動畫過程，可以添加任意百分比處的動畫細節 }

animation 屬性

• 需要將 @keyframes 中創建的動畫捆綁到某個選擇器，否則不會產生動畫效果
• animation 屬性用于對動畫進行捆綁
• 語法： div { animation: 動畫名稱 過渡時間 速度曲線 動畫次數 延時時間;}
• 其中必須設置動畫名稱和過渡時間，其他屬性值可以根據需求設置

屬性描述

animation-name	規定 @keyframes 動畫的名稱
animation-duration	規定動畫完成一個周期所花費的秒或毫秒，默認是 0
animation-timing-function	規定動畫的速度曲線，默認是 “ease”
animation-delay	規定動畫何時開始，默認是 0
animation-iteration-count	規定動畫被播放的次數，默認是 1，infinite表示無限次播放

* {margin: 0;padding: 0; } .box {width: 100px;height: 100px;border-radius: 50%;margin: 200px auto;background-color: skyblue;/* 添加綁定動畫 *//* animation: move 3s linear 3 1s; *//* animation: move2 3s linear 3 1s; */animation: move2 3s linear infinite; }/* 自定義動畫，過程 */ @keyframes move {/* 從頭開始 最好保持跟默認樣式狀態一致 */from {transform: translateY(0);}/* 到結束位置 */to {transform: translateY(150px);} }/* 百分比定義動畫細節 */ @keyframes move2 {0% {transform: translateY(0);}25% {transform: translateY(100px);}50% {transform: translateY(0);}75% {transform: translateY(-100px);}100% {transform: translateY(0);} }

總結

以上是生活随笔為你收集整理的css3 选择器_CSS 3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。