CSS偽類選擇器
幾種狀態(tài)偽類
- E:link 鏈接未被訪問前狀態(tài)
- E:visited 鏈接已訪問后狀態(tài)
- E:hover 鼠標(biāo)在其元素上的懸浮狀態(tài)
- E:active 元素被激活狀態(tài)下(鼠標(biāo)點(diǎn)擊與釋放之間)
- E:focus 鼠標(biāo)點(diǎn)擊并松開后的狀態(tài)或者元素處于輸入焦點(diǎn)狀態(tài)(可用于button點(diǎn)擊狀態(tài))
- 對于a標(biāo)簽的幾種狀態(tài)偽類，其書寫順序?yàn)?
:link(訪問前)、:visited(訪問后)、:hover(鼠標(biāo)移入)、:active(鼠標(biāo)點(diǎn)擊)、:focus(鼠標(biāo)點(diǎn)擊并釋放后)
CSS3新增的選擇器
-
子級選擇器
>
parent>child>符號之前書寫父級的選擇器，>符號之后寫子級選擇器，必須滿足父子級關(guān)系才能選中標(biāo)簽選中的是直接子代
-
兄弟選擇器
+、~-
相鄰兄弟選擇器
+
prev+next選中的是緊跟在prev后面的下一個(gè)同級元素next(擁有同一父元素)
-
同級兄弟通用選擇器
~
prev~Siblings選中的是prev后面的所有同級兄弟元素Siblings(擁有同一父元素)
-
-
屬性選擇器
選擇帶有某種屬性的所有元素選擇器 描述 E[attr] 選擇具有attr屬性的E元素 E[attr="val"] 選擇具有attr屬性且屬性值等于val的E元素 E[attr^="val"] 匹配具有attr屬性、且值以val開頭的E元素 E[attr$="val"] 匹配具有attr屬性、且值以val結(jié)尾的E元素 E[attr*="val"] 匹配具有attr屬性、且值中含有val的E元素 E[attr1][attr2] 匹配同時(shí)具有attr1和attr2屬性的E元素 -
結(jié)構(gòu)偽類選擇器
選擇器 描述 E:first-child 匹配父元素中的第一個(gè)子元素E E:last-child 匹配父元素中最后一個(gè)E元素 E:nth-child(n) 匹配父元素中的第n個(gè)子元素E E:first-of-type 選擇父元素下的指定類型E的第一個(gè)元素 E:last-of-type 選擇父元素下的指定類型E的最后一個(gè) E:nth-of-type(n) 選擇父元素下的指定類型E的第n個(gè) 其中n 可以是數(shù)字，關(guān)鍵字和公式。公式一般n從0開始一直遞增（第 0 元素或者超出了元素的個(gè)數(shù)會被忽略）
nth-child(n)與nth-of-type(n)的區(qū)別
E:nth-child(n)：選擇的是父元素下的第n個(gè)子元素，并且該元素的類型為E，須同時(shí)滿足兩個(gè)條件，否則不生效。
例如：div p:nth-child(1){}選中的是div下的第一個(gè)子元素，且該元素是p標(biāo)簽，否則不生效E:nth-of-type(n): 選擇的是父元素下的同類型E中的第 n 個(gè)同級兄弟元素，會忽略其他同級的非同類型元素
例如：div p:nth-of-type(1){}選中的是div下的所有p元素中的第一個(gè)p標(biāo)簽
目標(biāo)偽類選擇器 :target
突出顯示,選中被激活的HTML錨點(diǎn)元素(相關(guān)url指向的E元素)
:target/E:targetUI狀態(tài)偽類
:checked :匹配用戶界面上處于選中狀態(tài)的元素E
:enabled :匹配用戶界面上處于可用狀態(tài)的元素E
:disabled :匹配用戶界面上處于禁用狀態(tài)的元素E否定偽類 :not(selector)
將指定選擇器selector匹配到的元素排除出去-
偽元素選擇器
選擇器 描述 E::before 在 E 元素內(nèi)部的前面添加一個(gè)元素 E::after 在E元素內(nèi)部的后面添加一個(gè)元素 E::first-letter 匹配E元素內(nèi)的第一個(gè)字母 E::first-line 匹配E元素內(nèi)的第一行文本 -
CSS3中偽元素的雙冒號和單冒號的區(qū)別
區(qū)別：雙冒號是CSS3的新規(guī)范，單冒號是CSS2中的寫法，兩者等效，IE兼容性上單冒號比雙冒號好，并且CSS3規(guī)范上，雙冒號表示偽元素，而單冒號表示偽類對于偽元素注意事項(xiàng)
- 偽元素只能應(yīng)用于雙標(biāo)簽
- 偽元素中的冒號不能與元素之間存在空格
- 偽元素(::before、::after)內(nèi)部必須添加content屬性，content:"";
- 常用的::before和::after創(chuàng)建的元素屬于行內(nèi)元素
-
偽類與偽元素的區(qū)別
根據(jù)W3C對兩者應(yīng)用的描述：- 偽類：用于向某些選擇器添加特殊的效果
- 偽元素：用于將特殊效果添加到某些選擇器中
對于偽類，從字面上可以理解為一種虛擬的類class，偽類所產(chǎn)生的效果可以通過對已有的元素添加一個(gè)實(shí)際的類來達(dá)到。
而對于偽元素，可以理解為一種虛擬的元素，偽元素所產(chǎn)生的效果可以通過添加一個(gè)真實(shí)的新元素，再為其添加css樣式，從而達(dá)到效果。
兩者根本區(qū)別在于是否會創(chuàng)建一個(gè)新元素
選擇器權(quán)重
基礎(chǔ)選擇器：id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > *
偽類選擇器、屬性選擇器的權(quán)重等于類選擇器
偽元素選擇器的權(quán)重等于標(biāo)簽選擇器
CSS3新增屬性
-
CSS3盒模型（box-sizing屬性）
content-box- 默認(rèn)值，標(biāo)準(zhǔn)模式(Standard)，width、height屬性值只包含內(nèi)容寬高，不包括padding和border
- 盒子的大小為width(height) + padding + border，內(nèi)容區(qū)域?yàn)閣idth和height部分
border-box
- 怪異模式(Quirks)，width、height屬性值包含內(nèi)容寬高、padding、border
- 盒子的大小為width和height,添加padding和border之后，內(nèi)容區(qū)域就會相應(yīng)縮小
-
邊框圓角border-radius
設(shè)置邊框圓角，px、%（IE8及以下不支持該屬性）屬性值有兩種方式
- x-radius/y-radius: 水平半徑 / 垂直半徑
- radius: 水平、垂直半徑設(shè)置一個(gè)值
border-radius的書寫方式類似于padding、margin
也可以給某一個(gè)角設(shè)置圓角，如borde-top-left-radius(top-left、top-right、bottom-right、bottom-left)
-
文字陰影text-shadow
設(shè)置文字陰影效果h-shadow(水平陰影位置)、v-shadow(垂直陰影位置)、blur(模糊程度)、color(陰影顏色)
可以設(shè)置多層陰影，每層陰影的屬性值用
,隔開(先寫的陰影會壓蓋后寫的)
text-shadow:3px 3px 2px #ff0 , 6px 6px 2px #f0f -
盒子陰影box-shadow
為盒子的邊框添加陰影效果h-shadow(水平陰影位置)、v-shadow(垂直陰影位置)、blur(模糊程度)、spread(陰影面積)、color(陰影顏色)、inset(設(shè)置為內(nèi)部陰影)
可以設(shè)置多層陰影，用
,隔開(先寫的陰影會壓蓋后寫的)
box-shadow:3px 3px 5px 4px #ff0 , 7px 7px 5px 4px #f0f -
過渡屬性transition
給元素設(shè)置屬性改變的動畫效果(IE9及以下不支持，Safari需要給屬性加前綴-webkit-)屬性值
- transition-property：過渡屬性名（none、具體屬性名、all）
- transition-duration：過渡時(shí)間（s秒，單位必須寫）
- transition-timing-function：運(yùn)動曲線（linear、ease等）
- transition-delay：延遲執(zhí)行時(shí)間
-
2D轉(zhuǎn)換和3D轉(zhuǎn)換屬性transform
IE10、Firefox/Opera支持transform屬性，而Chrome和Safari需要添加前綴-webkit-,IE9需要添加前綴-ms-2D轉(zhuǎn)換
對元素進(jìn)行移動、縮放、旋轉(zhuǎn)、拉長或拉伸
位移translate()
translate(x, y): 水平、垂直方向位移距離
translate(x): 水平方向的位移縮放scale()
scale(x, y): 縮放寬度x、高度y
scale(n): 表示寬高同時(shí)縮放n倍
scaleX(n)、scaleY(n)旋轉(zhuǎn)rotate()
書寫語法；rotale(數(shù)值deg)
deg為度數(shù)單位，正數(shù)為順時(shí)針，2D只有一個(gè)屬性值，元素旋轉(zhuǎn)后，坐標(biāo)軸也會改變斜切（傾斜）skew()
transform:skew(x,y)
水平、垂直方向的傾斜角度變換原點(diǎn)transform-origin
transform-orign: x y ;
兩個(gè)值，中間用空格隔開
x：left、center、right、像素值、%
y：top、center、bottom、像素值、%
3D轉(zhuǎn)換
透視屬性perspective
設(shè)置在Z軸的視線焦點(diǎn)的觀察位置，從而視線3D效果
像素值越大，觀察點(diǎn)距離Z軸原點(diǎn)越遠(yuǎn)，圖形效果越完整且接近原始尺寸
perspective屬性設(shè)置在3D變換元素的父級transform-style屬性
設(shè)置被嵌套的子元素在父元素的 3D 空間中顯示，子元素是否保留 3D 空間
flat: 默認(rèn)值，子元素2D平面呈現(xiàn)
preserve-3d: 保留3D空間，呈現(xiàn)真正的3D效果
transform-style屬性設(shè)置給 3D 變換圖形的父級
因此，要實(shí)現(xiàn)真正的3D效果，最好是給進(jìn)行3D變換的元素的父級同時(shí)添加3D環(huán)境和透視屬性
方法
transform-style:preserve-3d;
perspective:1000px;3D旋轉(zhuǎn)
正值表示沿對應(yīng)軸順時(shí)針旋轉(zhuǎn)
rotateX()、rotateY()、rotateZ()3D位移
正值向?qū)?yīng)軸的正方向移動
translateX()、translateY()、translateZ()
-
CSS3動畫屬性 animation方法 + @keyframes規(guī)則
@keyframes規(guī)則- 用于創(chuàng)建動畫，使用百分比來規(guī)定動畫的關(guān)鍵幀，也可以使用關(guān)鍵字"from"和"to"來表示，等同于0%(動畫開始關(guān)鍵幀)和100%(動畫結(jié)束關(guān)鍵幀)
- 每一個(gè)關(guān)鍵幀中寫元素變化的CSS樣式
@keyframes 動畫名稱{ 0%{/*元素動畫初始的css樣式*/} 25%{/*css變化樣式*/} 50%{/*css變化樣式*/} 75%{/*css變化樣式*/} 100%{/*元素動畫結(jié)束的css樣式*/} }
animation屬性方法
- 用于對動畫進(jìn)行綁定
- 要實(shí)現(xiàn)真正的動畫，需要將@keyframes中創(chuàng)建的動畫綁定到某個(gè)選擇器上，否則不生效
- 屬性值：
animation-name
@keyframes定義的動畫名稱animation-duration
動畫時(shí)間(一個(gè)周期，s/ms)，默認(rèn)為0animation-timing-function
動畫的速度曲線默認(rèn)'ease'animation-delay
動畫延遲執(zhí)行時(shí)間,默認(rèn)為0animation-iteration-count
動畫次數(shù),默認(rèn)是1，infinite(無限循環(huán))-
animation-direction
動畫是否反向，可選值有：- normal：默認(rèn)值(0% ~ 100%)
- reverse: 反向(100% ~ 0%)
- alternate: 往返
- animation語法：
animation: 動畫名稱 動畫時(shí)長 速度曲線 動畫次數(shù) 延時(shí)時(shí)間；
其中，動畫名稱和動畫總時(shí)長是必需設(shè)置的，其他為可選屬性值，不寫則以默認(rèn)值加載
-
動畫使用步驟
- 聲明動畫 @keyframes:
指定動畫名稱 ，如： @keyframes move { }
指定動畫關(guān)鍵幀(0% ~ 100%) - 為元素調(diào)用動畫:
animation，指定動畫名以及動畫時(shí)長、動畫次數(shù)等，如 animation: move 3s;
案例：實(shí)現(xiàn)一個(gè)元素先水平向右移動500px，然后向下移動500px，然后向左移動500px，最后向上500px回到原位，5S完成動畫并一直重復(fù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@keyframes和animation實(shí)現(xiàn)動畫</title> <style> .box { width: 550px; height: 550px; border: 1px solid #000; margin: 50px auto; position: relative; } .ball { width: 50px; height: 50px; border-radius: 50%; background-color: #f00; position: absolute; left: 0; top: 0; } @keyframes move { 0% { left: 0; top: 0; } 25% { left: 500px; top: 0; } 50% { left: 500px; top: 500px; } 75% { left: 0; top: 500px; } 100% { left: 0; top: 0; } } .ball { animation: move 5s infinite; } </style> </head> <body> <div class="box"> <div class="ball"></div> </div> </body> </html> - 聲明動畫 @keyframes:
