CSS3新特性

CSS3 的現(xiàn)狀

新增的CSS3特性有兼容性問題，ie9+才支持
移動(dòng)端支持優(yōu)于 PC 端
不斷改進(jìn)中
應(yīng)用相對(duì)廣泛
現(xiàn)階段主要學(xué)習(xí)：新增選擇器和盒子模型以及其他特性

CSS3 新增選擇器

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標(biāo)元素。

屬性選擇器
結(jié)構(gòu)偽類選擇器
偽元素選擇器

屬性選擇器（★★）

屬性選擇器，按照字面意思，都是根據(jù)標(biāo)簽中的屬性來(lái)選擇元素

屬性選擇器.png

示例代碼：

 /* 只選擇 type =text 文本框的input 選取出來(lái) */
input[type=text] {
    color: pink;
}
/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
    color: red;
}
/* 選擇首先是section 然后 具有class屬性 并且屬性值 必須是 data結(jié)尾的這些元素 */
section[class$=data] {
    color: blue;
}

屬性選擇器，按照字面意思，都是根據(jù)標(biāo)簽中的屬性來(lái)選擇元素
屬性選擇器可以根據(jù)元素特定屬性的來(lái)選擇元素。這樣就可以不用借助于類或者id選擇器
屬性選擇器也可以選擇出來(lái)自定義的屬性
注意：類選擇器、屬性選擇器、偽類選擇器，權(quán)重為 10。

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

結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來(lái)選擇器元素，常用于根據(jù)父級(jí)選擇器里面的子元素

結(jié)構(gòu)偽類選擇器-01.png

E:first-child

匹配父元素的第一個(gè)子元素E

 <style>
    ul li:first-child{
      background-color: red;
    }
  </style>

  <ul>
    <li>列表項(xiàng)一</li>
    <li>列表項(xiàng)二</li>
    <li>列表項(xiàng)三</li>
    <li>列表項(xiàng)四</li>
  </ul>

first-child.png

E:last-child 則是選擇到了最后一個(gè)li標(biāo)簽

E:nth-child(n)（★★★）

匹配到父元素的第n個(gè)元素

匹配到父元素的第2個(gè)子元素

ul li:nth-child(2){}
匹配到父元素的序號(hào)為奇數(shù)的子元素

ul li:nth-child(odd){} odd 是關(guān)鍵字奇數(shù)的意思（3個(gè)字母）
匹配到父元素的序號(hào)為偶數(shù)的子元素

ul li:nth-child(even){} even（4個(gè)字母）
匹配到父元素的前3個(gè)子元素

ul li:nth-child(-n+3){}

選擇器中的 n 是怎么變化的呢？

因?yàn)?n是從 0 ，1，2，3.. 一直遞增

所以 -n+3 就變成了
- n=0 時(shí) -0+3=3
- n=1時(shí) -1+3=2
- n=2時(shí) -2+3=1
- n=3時(shí) -3+3=0
- ...

一些常用的公式：公式不是死的，在這里列舉出來(lái)讓大家能夠找尋到這個(gè)模式，能夠理解代碼，這樣才能寫出滿足自己功能需求的代碼

nth-child公式.png

常用的結(jié)構(gòu)偽類選擇器是： nth-child(n) {...}

E:nth-child 與 E:nth-of-type 的區(qū)別

這里只講明 E:nth-child(n) 和 E:nth-of-type(n) 的區(qū)別剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推導(dǎo)即可

<style>
    ul li:nth-child(2){
      /* 字體變成紅色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景變成綠色 */
      background-color: green;
    }
  </style>


  <ul>
    <li>列表項(xiàng)一</li>
    <p>亂來(lái)的p標(biāo)簽</p>
    <li>列表項(xiàng)二</li>
    <li>列表項(xiàng)三</li>
    <li>列表項(xiàng)四</li>
  </ul>

nth-child與nth-of-type區(qū)別.png

也就是說(shuō)：

E:nth-child(n) 匹配父元素的第n個(gè)子元素E，也就是說(shuō)，nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的）先找到第n個(gè)孩子，然后看看是否和E匹配
E:nth-of-type(n) 匹配同類型中的第n個(gè)同級(jí)兄弟元素E，也就是說(shuō)，對(duì)父元素里面指定子元素進(jìn)行排序選擇。先去匹配E ，然后再根據(jù)E 找第n個(gè)孩子

小結(jié)

結(jié)構(gòu)偽類選擇器一般用于選擇父級(jí)里面的第幾個(gè)孩子
nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的）先找到第n個(gè)孩子，然后看看是否和E匹配
nth-of-type 對(duì)父元素里面指定子元素進(jìn)行排序選擇。先去匹配E ，然后再根據(jù)E 找第n個(gè)孩子
關(guān)于 nth-child（n）我們要知道 n 是從 0 開始計(jì)算的，要記住常用的公式
如果是無(wú)序列表，我們肯定用 nth-child 更多
類選擇器、屬性選擇器、偽類選擇器，權(quán)重為 10

偽元素選擇器（★★★）

偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素，而不需要HTML標(biāo)簽，從而簡(jiǎn)化HTML結(jié)構(gòu)

偽元素.png

示例demo

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    /* div::before 權(quán)重是2 */
    div::before {
        /* 這個(gè)content是必須要寫的 */
        content: '我';
    }
    div::after {
        content: '小豬佩奇';
    }
</style>
<body>
    <div>
        是
    </div>
</body>

注意：

before 和 after 創(chuàng)建一個(gè)元素，但是屬于行內(nèi)元素
新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為偽元素
語(yǔ)法： element::before {}
before 和 after 必須有 content 屬性
before 在父元素內(nèi)容的前面創(chuàng)建元素，after 在父元素內(nèi)容的后面插入元素
偽元素選擇器和標(biāo)簽選擇器一樣，權(quán)重為 1

應(yīng)用場(chǎng)景一：字體圖標(biāo)

在實(shí)際工作中，字體圖標(biāo)基本上都是用偽元素來(lái)實(shí)現(xiàn)的，好處在于我們不需要在結(jié)構(gòu)中額外去定義字體圖標(biāo)的標(biāo)簽，通過(guò)content屬性來(lái)設(shè)置字體圖標(biāo)的編碼

步驟：

結(jié)構(gòu)中定義div盒子
在style中先申明字體 @font-face
在style中定義after偽元素 div::after{...}
在after偽元素中設(shè)置content屬性，屬性的值就是字體編碼
在after偽元素中設(shè)置font-family的屬性
利用定位的方式，讓偽元素定位到相應(yīng)的位置；記住定位口訣：子絕父相

<head>
    ...
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?1lv3na');
            src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?1lv3na') format('truetype'),
                url('fonts/icomoon.woff?1lv3na') format('woff'),
                url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: '?'; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

應(yīng)用場(chǎng)景二：仿土豆效果

把之前的代碼進(jìn)行了改善

步驟：

找到之前寫過(guò)的仿土豆的結(jié)構(gòu)和樣式，拷貝到自己的頁(yè)面中
刪除之前的mask遮罩
在style中，給大的div盒子（類名叫tudou的），設(shè)置 before偽元素
這個(gè)偽元素充當(dāng)?shù)氖钦谡值慕巧?，所以我們不用設(shè)置內(nèi)容，但是需要設(shè)置content屬性，屬性的值為空字符串
給這個(gè)遮罩設(shè)置寬高，背景顏色，默認(rèn)是隱藏的
當(dāng)鼠標(biāo)移入到 div盒子時(shí)候，讓遮罩顯示，利用 hover 來(lái)實(shí)現(xiàn)

<head>
    ...
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隱藏遮罩層 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 當(dāng)我們鼠標(biāo)經(jīng)過(guò)了 土豆這個(gè)盒子，就讓里面before遮罩層顯示出來(lái) */
        .tudou:hover::before {
            /* 而是顯示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

應(yīng)用場(chǎng)景三：清除浮動(dòng)

回憶一下清除浮動(dòng)的方式：

額外標(biāo)簽法也稱為隔墻法，是 W3C 推薦的做法。
父級(jí)添加 overflow 屬性
父級(jí)添加after偽元素
父級(jí)添加雙偽元素

額外標(biāo)簽法也稱為隔墻法，是 W3C 推薦的做法

額外標(biāo)簽法.png

A
注意： 要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素

后面兩種偽元素清除浮動(dòng)算是第一種額外標(biāo)簽法的一個(gè)升級(jí)和優(yōu)化

單偽元素.png

雙偽元素.png

盒子模型（★★★）

CSS3 中可以通過(guò) box-sizing 來(lái)指定盒模型，有2個(gè)值：即可指定為 content-box、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變

可以分成兩種情況：

box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的）
box-sizing: border-box 盒子大小為 width

如果盒子模型我們改為了box-sizing: border-box ，那padding和border就不會(huì)撐大盒子了（前提padding和border不會(huì)超過(guò)width寬度）

其他特性（★）

圖標(biāo)變模糊 -- CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素

語(yǔ)法：

filter:   函數(shù)(); -->  例如： filter: blur(5px);  -->  blur模糊處理  數(shù)值越大越模糊

filter.png

計(jì)算盒子寬度 -- calc 函數(shù)

calc() 此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算

語(yǔ)法：

width: calc(100% - 80px);

括號(hào)里面可以使用 + - * / 來(lái)進(jìn)行計(jì)算

CSS3 過(guò)渡（★★★）

過(guò)渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。

過(guò)渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過(guò)渡到另外一個(gè)狀態(tài)

可以讓我們頁(yè)面更好看，更動(dòng)感十足，雖然低版本瀏覽器不支持（ie9以下版本）但是不會(huì)影響頁(yè)面布局。

我們現(xiàn)在經(jīng)常和 :hover 一起搭配使用。

語(yǔ)法：

transition: 要過(guò)渡的屬性  花費(fèi)時(shí)間  運(yùn)動(dòng)曲線  何時(shí)開始;

屬性：想要變化的 css 屬性，寬度高度背景顏色內(nèi)外邊距都可以。如果想要所有的屬性都變化過(guò)渡，寫一個(gè)all 就可以
花費(fèi)時(shí)間：單位是秒（必須寫單位）比如 0.5s
運(yùn)動(dòng)曲線：默認(rèn)是 ease （可以省略）
何時(shí)開始：?jiǎn)挝皇?秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間默認(rèn)是 0s （可以省略）
后面兩個(gè)屬性可以省略
記住過(guò)渡的使用口訣：誰(shuí)做過(guò)渡給誰(shuí)加

運(yùn)動(dòng)曲線.png

過(guò)渡練習(xí)

進(jìn)度條.png

步驟：

創(chuàng)建兩個(gè)div的盒子，屬于的嵌套關(guān)系，外層類名叫 bar，里層類名叫 bar_in
給外層的bar 這個(gè)盒子設(shè)置邊框，寬高，圓角邊框
給里層的bar_in 設(shè)置初試的寬度，背景顏色，過(guò)渡效果
給外層的 bar 添加 hover事件，當(dāng)觸發(fā)了hover事件讓里層的bar_in 來(lái)進(jìn)行寬度的變化

代碼：

<head>
 ...
 <style>
 .bar {
 width: 150px;
 height: 15px;
 border: 1px solid red;
 border-radius: 7px;
 padding: 1px;
 }
 .bar_in {
 width: 50%;
 height: 100%;
 background-color: red;
 /* 誰(shuí)做過(guò)渡給誰(shuí)加 */
 transition: all .7s;
 }
 .bar:hover .bar_in {
 width: 100%;
 }
 </style>
</head>
<body>
 <div class="bar">
 <div class="bar_in"></div>
 </div>
</body>

廣義H5說(shuō)法了解

狹隘H5

廣義H5.png

廣義H5

廣義的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
這個(gè)集合有時(shí)稱為 HTML5 和朋友，通常縮寫為 HTML5 。
雖然 HTML5 的一些特性仍然不被某些瀏覽器支持，但是它是一種發(fā)展趨勢(shì)。
HTML5 MDN 介紹： https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

11、CSS3新特性新增選擇器、偽元素選擇器及應(yīng)用場(chǎng)景（浮動(dòng)清除）、盒子模型、計(jì)算函數(shù)、過(guò)度效果

11、CSS3新特性新增選擇器、偽元素選擇器及應(yīng)用場(chǎng)景（浮動(dòng)清除）、盒子模型、計(jì)算函數(shù)、過(guò)度效果

CSS3新特性

CSS3 的現(xiàn)狀

CSS3 新增選擇器

屬性選擇器（★★）

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

E:first-child

E:nth-child(n)（★★★）

E:nth-child 與 E:nth-of-type 的區(qū)別

小結(jié)

偽元素選擇器（★★★）

應(yīng)用場(chǎng)景一：字體圖標(biāo)

應(yīng)用場(chǎng)景二：仿土豆效果

應(yīng)用場(chǎng)景三：清除浮動(dòng)

盒子模型（★★★）

其他特性（★）

圖標(biāo)變模糊 -- CSS3濾鏡filter

計(jì)算盒子寬度 -- calc 函數(shù)

CSS3 過(guò)渡（★★★）

過(guò)渡練習(xí)

廣義H5說(shuō)法了解

狹隘H5

廣義H5

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

11、CSS3新特性 新增選擇器 、偽元素選擇器及應(yīng)用場(chǎng)景（浮動(dòng)清除）、盒子模型、計(jì)算函數(shù)、過(guò)度效果

CSS3新特性

CSS3 的現(xiàn)狀

CSS3 新增選擇器

屬性選擇器（★★）

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

E:first-child

E:nth-child(n)（★★★）

E:nth-child 與 E:nth-of-type 的區(qū)別

小結(jié)

偽元素選擇器（★★★）

應(yīng)用場(chǎng)景一： 字體圖標(biāo)

應(yīng)用場(chǎng)景二： 仿土豆效果

應(yīng)用場(chǎng)景三： 清除浮動(dòng)

盒子模型（★★★）

其他特性（★）

圖標(biāo)變模糊 -- CSS3濾鏡filter

計(jì)算盒子寬度 -- calc 函數(shù)

CSS3 過(guò)渡（★★★）

過(guò)渡練習(xí)

廣義H5說(shuō)法 了解

狹隘H5

廣義H5

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

11、CSS3新特性新增選擇器、偽元素選擇器及應(yīng)用場(chǎng)景（浮動(dòng)清除）、盒子模型、計(jì)算函數(shù)、過(guò)度效果

應(yīng)用場(chǎng)景一：字體圖標(biāo)

應(yīng)用場(chǎng)景二：仿土豆效果

應(yīng)用場(chǎng)景三：清除浮動(dòng)

廣義H5說(shuō)法了解