css3 选择器_CSS 3
生活随笔
收集整理的這篇文章主要介紹了
css3 选择器_CSS 3
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
好好學習，天天向上
本章主要內容為：CSS3 新增選擇器(子級、兄弟、結構偽類、偽元素、屬性)、CSS3盒模型、CSS3邊框、文字陰影、邊框陰影、過渡屬性、2D轉換、3D轉換
一、CSS3 新增選擇器
Ⅰ、子級選擇器
- 子級選擇器用于選取帶有特定父元素的元素
- 書寫語法：element1 > element2
- 注意：如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇
- > 符號之前書寫父級的選擇器，> 符號之后寫子級選擇器，必須滿足父子級關系才能選中標簽
示例圖：
Ⅱ、兄弟選擇器
| element1 + element2 | 匹配同一個父元素中緊跟在element1后面的一個element2元素 |
| element1 ~ element2 | 匹配同一個父元素中在element1后面的所有element2元素 |
相鄰兄弟選擇器
- 相鄰兄弟選擇器可以用于選擇緊接在另一個元素后的兄弟元素，而且二者有相同的父元素
- 書寫語法：element1 + element2
注意：
- 選中的是緊跟在 element1 之后的同級元素 element2
- 只能選中緊跟在后面的一個 element2 元素
- 二者有相同的父元素
- + 符號前后可以添加空格書寫
示例圖：
其他兄弟選擇器
- 其他兄弟選擇器匹配同一個父元素中在 element1 后面的所有 element2 元素
- 書寫語法：element1 ~ element2
注意：
- 選擇 element1 之后出現的所有 element2
- 兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1
- ~ 符號前后可以添加空格書寫
Ⅲ、結構偽類選擇器
| 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…… |
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 容器內的第一行文本 |
示例圖：
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元素 |
選擇器權重
- 基礎選擇器：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后， 內容區域會收縮
示例圖：
三、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-radius 相當于四個單一屬性的簡寫方法，類似 padding 也可以有四種值的寫法
- border-radius: 左上角 右上角 右下角 左下角;
- border-radius: 左上角 右上角 和 左下角 右下角;
- border-radius: 左上角 和 右下角 右上角 和 左下角;
- border-radius: 四個角相同;
/ 的屬性值寫法
- border-radius 屬性值中出現了 / 斜線，那么 / 前面可以設置水平方向四種值的寫法，/ 后面可以設置垂直方向四種值的寫法
示例圖：
Internet Explorer 8 及以下版本瀏覽器不支持border-radius屬性，其他瀏覽器都支持
Ⅱ、文字陰影
- 在 CSS3 中，text-shadow 可向文本應用陰影，通過屬性值能夠規定水平陰影、垂直陰影、 模糊距離，以及陰影的顏色
| h-shadow | 必需，水平陰影的位置，允許負值 |
| v-shadow | 必需，垂直陰影的位置，允許負值 |
| blur | 可選，模糊的距離 |
| color | 可選，陰影的顏色 |
文字陰影語法
- text-shadow 屬性向文本添加陰影，屬性值有2-3個長度值和一個可選的顏色值進行規定，省略的長度是 0
示例圖：
多層陰影
- text-shadow 屬性也可以向文本添加多個陰影，逗號分隔多個陰影的屬性值
- 注意：多陰影中，先寫的陰影壓蓋在后寫的陰影上
示例圖：
Ⅲ、邊框陰影
- CSS3 中，box-shadow 屬性用于對盒子邊框添加陰影
| h-shadow | 必需，水平陰影的位置，允許負值 |
| v-shadow | 必需，垂直陰影的位置，允許負值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影的尺寸 |
| color | 可選，陰影的顏色 |
| inset | 可選，將外部陰影改為內部陰影 |
邊框陰影語法
- box-shadow 屬性向盒子添加陰影，屬性值有 2-4 個長度值、可選的顏色值以及可選 的 inset 關鍵詞來規定，省略的長度是 0
多層陰影
- box-shadow 屬性也可以向盒子添加多個陰影，逗號分隔多個陰影的屬性值
- 注意：多陰影中，先寫的陰影壓蓋在后寫的陰影上
Ⅳ、過渡屬性
- 屬性名：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) | 只有一個數值，表示水平方向的位移 |
示例圖：
縮放 scale()
- transform 的屬性值為 scale() 時，可以實現元素縮放效果
| scale(x, y) | x,y 分別為改變元素的寬度和高度的倍數 |
| scale(n) | 只有一個值，表示寬度和高度同時縮放n倍 |
| scaleX(n) | 改變元素的寬度 |
| scaleY(n) | 改變元素的高度 |
旋轉 rotate()
- transform 屬性值設置為 rotate() 時，實現元素的旋轉
- rotate(數字deg)
- 其中，deg為度數單位，正數表示順時針旋轉，負數表示逆時針旋轉。2D的旋轉只有 一個屬性值
- 元素旋轉后，坐標軸也跟著發生轉變
- 多個屬性值同時設置給 transform 時，書寫順序不同導致的轉換效果有差異
傾斜 skew()
- transform 屬性值設置為 skew() 時，實現元素的傾斜
- transform: skew(數字deg,數字deg)
- 兩個屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負，第二個數值不寫默認為0
transform-origin 屬性
- 作用：設置調整元素的水平和垂直方向原點的位置
- 調整元素的基準點
- 屬性值：包含兩個，中間使用空格分隔
| x | 定義 x 軸的原點在何處，可能的值：left 、center、right、像素值、百分比 |
| y | 定義 y 軸的原點在何處，可能的值：top、center、bottom、像素值、百分比 |
示例圖：
Ⅶ、案例-2D轉換卡包特效
效果圖：
代碼地址：
01-02-task -materials/2D轉換-卡包特效案例.html · 吳騰輝/前端案例和應用源碼 - Gitee.com?gitee.comⅧ、3D 轉換
透視屬性 perspective
- 屬性名：perspective
- 作用：設置在 z 軸的視線焦點的觀察位置，從而實現 3D 查看效果
- 屬性值：像素值，數值越大，觀察點距離 z 軸原點越遠，圖形效果越完整且接近原始尺寸
- 注意：透視屬性需要設置給 3D 變化元素的父級
3D 旋轉
- 3D旋轉比2D旋轉更復雜，需要分別對三個方向的旋轉角度值
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉 |
- 屬性值的角度區分正負，正數表示沿對應坐標軸順時針方向旋轉，負數表示沿對應坐標軸逆時針 方向旋轉
3D 位移
- 類似的，位移也分為三個方向的移動
| translateX(x) | 設置 X 軸的位移值 |
| translateY(y) | 設置 Y 軸的位移值 |
| translateZ(z) | 定義3D位移，設置Z軸的位移值 |
示例圖：
Ⅸ、3D案例-正方體
- transform-style屬性
- 用于設置被嵌套的子元素在父元素的 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表示無限次播放 |
總結
以上是生活随笔為你收集整理的css3 选择器_CSS 3的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js根据月数计算有效日期_你真的看懂产品
- 下一篇： css 浮动在最上层_CSS编码规范