十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七、CSS3 屬性選擇器(上)
什么是 CSS3
- 在 CSS2 的基礎上拓展、新增的樣式
CSS3 發展現狀
- 移動端支持優于 PC 端
- CSS3 目前還草案，在不斷改進中
- CSS3 相對 H5，應用非常廣泛
屬性選擇器列表
屬性選擇器代碼演示
（1）E[att] 選擇具有att屬性的E元素
（2）E[att = ‘val’] 選擇具有att屬性并且屬性值為val的E元素
（3）E[att^ = ‘val’] 選擇具有att屬性并且屬性值以val開頭的E元素
（4）E[att$ = ‘val’] 選擇具有att屬性并且屬性值以val結尾的E元素
注意：類選擇器、屬性選擇器、偽類選擇器的權重均為10。
八、CSS3 屬性選擇器(下)
代碼演示
input[type=search] {color: skyblue; }span[class^=black] {color: lightgreen; }span[class$=black] {color: lightsalmon; }span[class*=black] {color: lightseagreen; }九、結構偽類選擇器
屬性列表
?
代碼演示
ul li:first-child {background-color: lightseagreen; }ul li:last-child {background-color: lightcoral; }ul li:nth-child(3) {background-color: aqua; }十、nth-child 參數詳解
nth-child 詳解
-
注意：本質上就是選中第幾個子元素
-
n 可以是數字、關鍵字、公式
-
n 如果是數字，就是選中第幾個
-
常見的關鍵字有 even 偶數、odd 奇數
-
常見的公式如下(如果 n 是公式，則從 0 開始計算)
-
但是第 0 個元素或者超出了元素的個數會被忽略
?
十一、nth-child 和 nth-of-type 的區別
上圖代碼中為第一個孩子設置的紅色不生效！
上圖代碼中的第一個孩子設置的藍色生效了，也就是熊大所在行的背景顏色變成藍色。
區別
- nth-child 選擇父元素里面的第幾個子元素，不管是第幾個類型【E:nth-child（n） 是先對父元素里面所有的孩子進行排序，找到第n個孩子,然后再看是否和E匹配】
- nth-of-type 選擇指定類型的元素【E:nth-of-type(n) 是先去匹配E，然后再對父元素里面指定的子元素進行排序，根據E找第n個孩子】
十二、偽元素選擇器
偽類選擇器
?
偽類選擇器注意事項
- before 和 after 必須有 content 屬性
- before 在內容前面，after 在內容后面
- before 和 after 創建的是一個元素，但是屬于行內元素
- 創建出來的元素在 Dom 中查找不到，所以稱為偽元素
- 偽元素和標簽選擇器一樣，權重為 1
代碼演示
<style>div {width: 100px;height: 100px;border: 1px solid lightcoral;}div::after,div::before {width: 20px;height: 50px;text-align: center;display: inline-block;}div::after {content: '德';background-color: lightskyblue;}div::before {content: '道';background-color: mediumaquamarine;}</style>十三、偽元素的案例
添加字體圖標
p {width: 220px;height: 22px;border: 1px solid lightseagreen;margin: 60px;position: relative; } p::after {content: '\ea50';font-family: 'icomoon';position: absolute;top: -1px;right: 10px; }偽元素清除浮動
十四、2D 轉換之 translate
-
2D 轉換是改變標簽在二維平面上的位置和形狀
-
移動： translate
-
旋轉： rotate
-
縮放： scale
- x 就是 x 軸上水平移動
- y 就是 y 軸上水平移動
重點知識點
- 2D 的移動主要是指 水平、垂直方向上的移動
- translate 最大的優點就是不影響其他元素的位置
- translate 中的100%單位，是相對于本身的寬度和高度來進行計算的
- 行內標簽沒有效果
代碼演示
十五、通過 定位（子絕父相） + transform:translate(-50%,-50%)讓一個盒子水平垂直居中
代碼演示：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {position: relative;width: 500px;height: 500px;background-color: pink;/* 1. 我們tranlate里面的參數是可以用 % *//* 2. 如果里面的參數是 % 移動的距離是 盒子自身的寬度或者高度來對比的 *//* 這里的 50% 就是 50px 因為盒子的寬度是 100px *//* transform: translateX(50%); */}p {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;background-color: purple;/* margin-top: -100px;margin-left: -100px; *//* translate(-50%, -50%) 盒子往上走自己高度的一半 */transform: translate(-50%, -50%);}span {/* translate 對于行內元素是無效的 */transform: translate(300px, 300px);}</style> </head><body><div><p></p></div><span>123</span> </body></html>十六、2D 轉換 rotate
rotate 旋轉
- 2D 旋轉指的是讓元素在二維平面內順時針或者逆時針旋轉
rotate 語法
- rotate 里面跟度數，單位是 deg
- 角度為正時，順時針，角度為負時，逆時針
- 默認旋轉的中心點是元素的中心點
旋轉中心點 transform-origin:
代碼演示：
十七、CSS 3盒子模型
CSS3中可以通過 box-sizing來指定盒模型，
有2個值：
即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況：
1.box-sizing:content-box盒子大小為 width+padding+border（以前默認的）
2.box-sizing:border-box 盒子大小為width如果盒子模型我們改為了box-sizing border-box，那么padding和border就不會撐大盒子了（前提是padding和border不會超過width的寬度）
十八、CSS 3濾鏡filter
十九、CSS 3 calc函數：
二十、CSS 3 過渡（重點）：
1、基本使用方法：
transition: 需要變化的屬性 花費的時間 運動曲線 何時開始；
2、如果需要同時給多個屬性加過渡效果，可以使用逗號進行分割
3、如果想要所有的屬性都發生變化，有過渡的效果，直接把屬性寫成 all 即可
總結
以上是生活随笔為你收集整理的十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Chapter7-13_Dialogue
- 下一篇： 十一、CSS初始化详解