css3 新增選擇器

子集選擇器

作用：用于選取帶有特定父元素的元素。
語法：element1>element2
注意：如果element2不是element1父級(jí)元素的直接子元素跪另，則不會(huì)被選擇免绿。

子集選擇器代碼示例

<div class="element1">
    <p class="element"></p>
</div>
>符號(hào)之前書寫的是父級(jí)選擇器擦盾，>符號(hào)之后書寫的是子集選擇器迹卢，必須滿足父子及關(guān)系才能被選中腐碱。

兄弟選擇器

相鄰兄弟選擇器

作用：用于選擇緊跟在元素后面的兄弟元素，并且兩個(gè)元素有相同的父標(biāo)簽彤枢。
語法：element1 + element2
注意：1.選中的是緊跟在element1后面的element2元素缴啡。
    2.只能選中element1后面的一個(gè)element2元素瓷们。
    3.兩者必須有相同的父元素谬晕。

相鄰兄弟選擇器示例

<div class="box">
    <p class="element1"></p>
    <p class="element2"></p>
    <p class="element2"></p>
</div>
只能選中element1后面緊跟的element2元素攒钳，且只能選擇一個(gè)。
<div class="box">
    <p class="element1"></p>
    <span></span>
    <p class="element2"></p>
    <p class="element2"></p>
</div>
如果element1和element2之間有span相隔文兢，則無法選取到element2標(biāo)簽姆坚。

其他兄弟選擇器

作用：其他兄弟選擇器匹配在同一個(gè)父元素中element1之后所有的element2元素。
語法：element1~element2
注意：1.選擇的是element1后面所有的element2標(biāo)簽兔辅。
    2.element1和element2必須是在同一個(gè)父元素下维苔，但是element1和element2中間可以有其他元素相隔懂昂。

結(jié)構(gòu)偽類選擇器

E:nth-child(n)詳解

描述：匹配父元素中的第n個(gè)元素E忍法。
注意：1.在語法書寫的時(shí)候饿序，可以選擇在nth-child(n)前面添加標(biāo)簽名原探，也可以不添加顽素。如果添加標(biāo)簽名胁出，則表示選擇的是父元素下的第n個(gè)E元素，需要同時(shí)滿足這兩個(gè)條件全蝶，即父元素下的第n個(gè)標(biāo)簽元素是E抑淫。此時(shí)才會(huì)被選中。
    2.n可以寫成是數(shù)字砌烁，也可以寫成是even和odd函喉，even表示選擇父元素下的偶數(shù)標(biāo)簽函似，odd表示選擇父元素下的奇數(shù)標(biāo)簽。
    3.n也可以使用公式顿天，比如2n牌废，就表示從n從0開始乘以2啤握，一直到超出選擇元素的個(gè)數(shù)排抬。也可以有其他的公式自由組合。

E:first-of-type

描述：首先將元素根據(jù)標(biāo)簽名進(jìn)行分組番甩，然后選擇分組后的第一個(gè)元素缘薛。同理宴胧，last-of-type選擇最后一個(gè)元素表锻。ntn-of-type(n)選擇分組后的第n個(gè)元素瞬逊。

nth-child(n)和 nth-of-type(n)的區(qū)別：

1.E:nth-child(n)匹配父元素的第n個(gè)子元素E码耐，同時(shí)需要滿足兩個(gè)條件，即父元素下第n個(gè)子元素為E敦间。
2.E:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素E廓块，會(huì)忽視掉其他同級(jí)的非兄弟類元素带猴。

偽元素選擇器::before

語法：E::before
描述：在E元素內(nèi)部前面添加一個(gè)元素或內(nèi)容
注意：1.偽元素只能給雙標(biāo)簽的元素添加，單標(biāo)簽元素不可以使用偽元素靶病。
    2.偽元素的冒號(hào)前不允許有空格娄周，如E ::before寫法是錯(cuò)誤的煤辨。
    3.偽元素里面必須寫上屬性content:""木张。
    4.偽元素創(chuàng)建的元素是行內(nèi)元素舷礼。
示例：css：
        .box-box::before {
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    html：
        <div class="box-box">
            <p class="element1"></p>
            <p class="element2"></p>
            <p class="element2"></p>
        </div>

偽元素選擇器::after

語法：E::after
描述：在E元素內(nèi)部后面插入一個(gè)元素或內(nèi)容

偽元素選擇器::first-letter

語法：E::first-letter
描述：選擇到E容器內(nèi)第一個(gè)字母

偽元素選擇器::first-line

語法：E::first-line
描述：選擇到E容器內(nèi)的第一行文本

css3 新增屬性選擇器

選擇器權(quán)重

基礎(chǔ)選擇器：id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 通配符選擇器
偽類選擇器浮声，屬性選擇器的權(quán)重相當(dāng)于類選擇器旋奢。
偽元素選擇器的權(quán)重相當(dāng)于標(biāo)簽選擇器至朗。

新增屬性選擇器代碼示例

CSS:
    <!-- 表示選擇具有name屬性的標(biāo)簽 -->
    input[name] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示選擇type屬性值等于checkbox的標(biāo)簽 -->
    input[type="checked"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示選擇class屬性的屬性子以icon開頭的標(biāo)簽 -->
    input[class^="icon"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示選擇class屬性的屬性值以duo結(jié)尾的標(biāo)簽 -->
    input[class$="duo"] {
        width: 100px;
        height: 100px;
    }
    <!-- 表示選擇type屬性中屬性值包含o的標(biāo)簽 -->
    input[type*="o"] {
        width: 100px;
        height: 100px;
    }
HTML:
    <input type="radio" name="sex" class="icon-dan"> 男
    <input type="radio" name="sex" class="icon-dan"> 女
    <input type="checkbox" class="icon-duo"> 籃球
    <input type="checkbox" class="icon-duo"> 足球
    <input type="button" value="提交">

css3 盒模型 box-sizing

描述：可以通過box-sizing來指定盒模型，這樣就可以設(shè)置如何計(jì)算一個(gè)元素的總高度盒總寬度唆香。

box-sizing 屬性

邊框圓角

描述：設(shè)置邊框的圓角全度。
語法：border-radius：屬性值将鸵；
屬性值：可以是像素又可以是百分比顶掉，百分比是參考盒子整體的寬度和高度的百分比痒筒。
注意：border-radius有單一屬性的寫法嗜暴；
    border-left-radius
    border-top-radius
    border-right-radius
    border-bottom-radius
    2.IE8及以下版本瀏覽器不支持border-radius屬性闷沥，其他瀏覽器都支持咐容。

border-radius 屬性值

文字陰影 text-shadow

描述：text-shadow向文本添加陰影，通過屬性值能夠添加水平陰影厨喂，垂直陰影，模糊距離以及陰影的顏色庄呈。
語法：text-shadow: 水平位置 垂直位置 模糊距離 顏色

文字多層陰影

描述：text-shadow可以向文字添加多層陰影蜕煌，逗號(hào)分隔多個(gè)陰影的屬性值（四個(gè)屬性值），在多陰影中抒痒，先寫的陰影壓蓋在后寫的陰影上幌绍。
text-shadow: 3px 3px #FF0000,6px 6px #00ff00

陰影屬性值

邊框陰影

描述：box-shadow屬性用于對(duì)邊框添加陰影樟蠕。
語法：box-shadow: 水平位置 垂直位置 模糊距離 陰影尺寸 陰影顏色 內(nèi)陰影贮聂；
注意：box-shadow也可以設(shè)置多層陰影，語法與text-shadow一樣寨辩。

邊框陰影屬性值

過渡屬性 transition

描述：在不適用flash和js的情況下梢杭，使用transition屬性可以時(shí)間補(bǔ)間動(dòng)畫（過渡效果）温兼，并且當(dāng)前元素只要有屬性變化即存在兩種狀態(tài)，那么兩種狀態(tài)之間的切換就可以實(shí)現(xiàn)平滑的過渡效果武契。
語法：transition:過渡屬性 過渡時(shí)間 運(yùn)動(dòng)曲線 延時(shí)時(shí)間;
兼容問題：1.IE10募判，F(xiàn)irefox，chrome等瀏覽器支持該屬性咒唆。
    2.Safari瀏覽器需要前綴"-webkit-".
    3.IE9以及更早版本不支持transition屬性兰伤。

transition-property 過渡屬性

1.none：表示沒有屬性過渡。
2.all：表示所有變化的屬性都過渡钧排。
3.屬性名：使用具體的屬性名敦腔，多個(gè)屬性名之間用逗號(hào)分隔。比如設(shè)置寬度過渡，當(dāng)元素的寬度發(fā)生變化的時(shí)候仪糖，就會(huì)有過渡效果峻呛。

時(shí)間

過渡時(shí)間：以s秒為單位
延時(shí)時(shí)間：以s秒為單位
注意：0s也需要加單位。

運(yùn)動(dòng)曲線 transition-timing-function

2D 轉(zhuǎn)換 transform

描述：對(duì)元素進(jìn)行移動(dòng)辩撑，縮放，轉(zhuǎn)動(dòng)仿耽，拉長(zhǎng)或拉伸合冀。配合過渡和動(dòng)畫知識(shí)，可以代替flash才能實(shí)現(xiàn)的效果项贺。
屬性值：多種轉(zhuǎn)化方法的屬性值君躺，可以實(shí)現(xiàn)不同的轉(zhuǎn)換效果峭判。

2D 轉(zhuǎn)換-位移-translate()

描述：當(dāng)transform的屬性值為translate()時(shí)，可以實(shí)現(xiàn)位移效果棕叫。
語法：1.translate(x,y),x和y分別表示水平方向和垂直方向的移動(dòng)距離林螃，可以為px的值和百分比。區(qū)分正負(fù)俺泣。
    2.translate(x):只有一個(gè)值治宣，表示水平方向的位移。

2D 轉(zhuǎn)換-縮放-scale()

描述：當(dāng)transform的屬性值為scale()時(shí)砌滞，可以實(shí)現(xiàn)元素縮放效果侮邀。
語法：1.scale(x,y):x和y分別表示改變?cè)貙挾群透叨鹊谋稊?shù)。
    2.scale(n):只有一個(gè)值n贝润，表示寬高同時(shí)縮放n倍绊茧。
    3.scaleX(n):改變?cè)氐膶挾取?    4.scaleY(n):改變?cè)氐母叨取?

2D 轉(zhuǎn)換-旋轉(zhuǎn)-rotate()

描述：當(dāng)transform的屬性值為rotate()時(shí)，可以實(shí)現(xiàn)元素旋轉(zhuǎn)效果打掘，沿著元素的中心點(diǎn)進(jìn)行旋轉(zhuǎn)华畏。
語法：rotate(數(shù)字deg)：deg表示度數(shù)單位，正數(shù)表示順時(shí)針旋轉(zhuǎn)尊蚁，負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)亡笑，2D旋轉(zhuǎn)只有一個(gè)屬性值。
注意：當(dāng)元素發(fā)生旋轉(zhuǎn)后横朋，元素的坐標(biāo)也會(huì)發(fā)生變化仑乌，因此，多個(gè)屬性值同時(shí)設(shè)置給transform時(shí)琴锭，書寫順序不同導(dǎo)致的轉(zhuǎn)換效果有差異晰甚。

2D 轉(zhuǎn)換-傾斜-skew()

描述：當(dāng)transform的屬性值為skew()的時(shí)候，可以實(shí)現(xiàn)元素的傾斜效果决帖。
語法：skew(數(shù)字deg,數(shù)字deg)：兩個(gè)數(shù)字分別表示水平方向和垂直方向的旋轉(zhuǎn)角度厕九，屬性值可以為正可以為負(fù)，第二個(gè)屬性值不寫默認(rèn)為0地回。

2D 轉(zhuǎn)換-基準(zhǔn)點(diǎn) transform-origin()

描述：設(shè)置調(diào)整元素水平方向和垂直方向原點(diǎn)的位置扁远。調(diào)整元素的基準(zhǔn)點(diǎn)。
語法：transform-origin: x y;x表示定義x軸的原點(diǎn)在何處刻像，可能的值分別為left畅买，center，right绎速，像素值皮获，百分比焙蚓。y表示定義y軸的原點(diǎn)在何處纹冤，可能的值同x相同洒宝。top，center萌京，bottom雁歌，像素值，百分比知残。

2D 轉(zhuǎn)換案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 225px;
            height: 150px;
            /* border: 1px solid black; */
            margin: 300px auto;
        }

        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 225px;
            height: 150px;
            transform-origin: right top;
            transition: all ease 1s 0s;
        }

        .box1 {
            background-color: skyblue;
        }

        .box2 {
            background-color: pink;
        }

        .box3 {
            background-color: salmon;
        }

        .box4 {
            background-color: sandybrown;
        }

        .box5 {
            background-color: tomato;
        }

        .box6 {
            background-color: darkseagreen;
        }

        .box:hover div:nth-child(1) {
            transform: rotate(60deg)
        }

        .box:hover div:nth-child(2) {
            transform: rotate(120deg)
        }

        .box:hover div:nth-child(3) {
            transform: rotate(180deg)
        }

        .box:hover div:nth-child(4) {
            transform: rotate(240deg)
        }

        .box:hover div:nth-child(5) {
            transform: rotate(300deg)
        }

        .box:hover div:nth-child(6) {
            transform: rotate(360deg)
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</body>

</html>

透視屬性 perspective

描述：設(shè)置z軸的視線焦點(diǎn)的觀察位置靠瞎，從而實(shí)現(xiàn)3D查看效果。
屬性值：像素值數(shù)值越大求妹，觀察點(diǎn)距離z軸原點(diǎn)越遠(yuǎn)乏盐，圖形效果越完整且接近原始尺寸。
注意：透視屬性需要設(shè)置給3D變化元素的父級(jí)制恍。
總結(jié)：如果想實(shí)現(xiàn)元素的3D轉(zhuǎn)換父能，就需要給元素的父元素添加perspective屬性，屬性值越大圖形想過月接近原始尺寸净神，屬性值越小何吝，3D旋轉(zhuǎn)效果越明顯。

3D 旋轉(zhuǎn)

描述：3D旋轉(zhuǎn)分為三個(gè)方向的角度旋轉(zhuǎn)鹃唯。
屬性值：rotateX(angle):定義沿著X軸的3D旋轉(zhuǎn)爱榕。
        rotateY(angle):定義沿著Y軸的3D旋轉(zhuǎn)。
        rotateZ(angle):定義沿著Z軸的3D旋轉(zhuǎn)坡慌。

3D 位移

描述：3D位移也分為三個(gè)方向的位移黔酥。
屬性值：translateX(x):設(shè)置x軸的位移值。
        translateY(y)：設(shè)置y軸的位移值洪橘。
        translateZ(z): 定義3D位移絮爷，設(shè)置z軸的位移值

transform-style 屬性

描述：用于設(shè)置在被嵌套的子元素在父元素的3D空間中顯示，子元素會(huì)保留子集的3D轉(zhuǎn)換坐標(biāo)軸梨树。
語法：transform-style: 屬性值;
屬性值：
    flat: 所有子元素在2D平面呈現(xiàn)坑夯。
    preserve-3d: 保留3D空間。
注意：該屬性一般設(shè)置給3D變換圖形的父元素抡四。

transform 瀏覽器兼容

瀏覽器兼容：IE10,Firefox,以及opera瀏覽器支持transform屬性柜蜈，Chrome和Safari需要添加"-webkit-"前綴，IE9需要添加"-ms-"前綴指巡。

動(dòng)畫

描述：在css3中動(dòng)畫效果需要兩步淑履，首先需要?jiǎng)?chuàng)建動(dòng)畫，然后需要綁定動(dòng)畫藻雪。

@keyframes 規(guī)則

描述：@keyframes規(guī)則用于創(chuàng)建動(dòng)畫秘噪，在@keyframes中定義某項(xiàng)css樣式，就能創(chuàng)建從一種樣式逐漸變化為另一種樣式的效果勉耀，可以改變?nèi)我舛嗟臉邮街讣澹我舛嗟拇螖?shù)蹋偏。
    需要使用百分比來規(guī)定變化發(fā)生的時(shí)間，或者使用關(guān)鍵詞"from"和"to",等同于0%和100%至壤，0%是動(dòng)畫的開始威始，100%是動(dòng)畫的結(jié)束。
語法：@keyframes 自定義動(dòng)畫名稱 {
    動(dòng)畫過程像街，可以添加任意百分比處的動(dòng)畫細(xì)節(jié)
}

@keyframes 規(guī)則代碼示例

/* @keyframes 百分比形式 */
@keyframes move2 {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(100px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-100px);
    }

    100% {
        transform: translateY(0);
    }
}
 /* @keyframes 定義動(dòng)畫 */
@keyframes move {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(100px);
    }
}

動(dòng)畫調(diào)用 animation 屬性

描述：將@keyframes創(chuàng)建的某個(gè)動(dòng)畫綁定到選擇器上黎棠，否則不會(huì)產(chǎn)生動(dòng)畫效果，animation屬性就是將動(dòng)畫綁定到選擇器上镰绎。
語法：div {
    animation: 動(dòng)畫名稱 過渡時(shí)間 速度曲線 動(dòng)畫次數(shù) 延遲時(shí)間;
}
其中必須設(shè)置動(dòng)畫名稱和過渡時(shí)間脓斩，速度曲線于transition的運(yùn)動(dòng)曲線一樣。

動(dòng)畫代碼示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            border-radius: 50%;
            background-color: skyblue;
            /* 綁定動(dòng)畫 */
            /* animation: move 3s linear; */
            animation: move2 3s linear;
        }

        /* @keyframes 定義動(dòng)畫 */
        @keyframes move {
            from {
                transform: translateY(0)
            }

            to {
                transform: translateY(100px);
            }
        }

        /* @keyframes 百分比形式 */
        @keyframes move2 {
            0% {
                transform: translateY(0);
            }

            25% {
                transform: translateY(100px);
            }

            50% {
                transform: translateY(0);
            }

            75% {
                transform: translateY(-100px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>