CSS學習35-CSS3的新特性

阿新 • • 發佈：2021-06-18

CSS3 的新特性

1. CSS3 的現狀

新增的 CSS3 特性有相容性問題，ie9+才支援
移動端支援優於 PC 端
不斷改進中
應用相對廣泛
現階段主要學習：新增選擇器和盒子模型以及其他特性

2. CSS3 新增選擇器

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

屬性選擇器
結構偽類選擇器
偽元素選擇器

2.1 屬性選擇器

屬性選擇器可以根據元素特定的屬性來選擇元素。這樣就可以不用藉助於類或者 id 選擇器。

選擇符	簡介
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 元素

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3新增屬性選擇器</title>
    <style>
        /* 必須是input 但是同時具有 value這個屬性 選擇這個元素 [] */
        /* input[value] {
            color: pink;
        } */

        /* 只將 type=text 文字框的input 選取出來 */
        input[type=text] {
            color: pink;
        }

        /* 選擇首先是div 然後 具有class屬性 並且屬性值 必須是 icon開頭的這些元素 */
        div[class^=icon] {
            color: red;
        }

        section[class$=data] {
            color: blue;
        }

        section[class*=icon3] {
            color: green;
        }

        /* div.class 中間沒有空格 是交集選擇器 */
        div.icon1 {
            color: skyblue;
        }

        /* 類選擇器、屬性選擇器和偽類選擇器 權重都是 10 */
    </style>
</head>

<body>
    <!-- 1. 利用屬性選擇器就可以不用藉助於類或者id選擇器 -->
    <!-- <input type="text" value="請輸入使用者名稱">
    <input type="text"> -->
    <!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素  重點 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 -->
    <div class="icon1">小圖示1</div>
    <div class="icon2">小圖示2</div>
    <div class="icon3">小圖示3</div>
    <div class="icon4">小圖示4</div>
    <div>我是打醬油的</div>
    <!-- 4. 屬性選擇器可以選擇屬性值結尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是誰</section>

</body>

</html>

執行結果

2.2 結構偽類選擇器

結構偽類選擇器主要根據文件結構來選擇元素，常用於選擇父級選擇器裡面的第幾個孩子

選擇符	簡介
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 個子元素，裡面數字從1開始
n 可以是關鍵字： even 偶數， odd 奇數
n 可以是公式：常見的公式如下 (如果n是公式，則從0開始計算，但是第0個元素或者超出了的個數會被忽略)

公式取值

2n 偶數

2n+1 奇數

5n 5 10 15 ...

n+5 從第5個開始 ( 包含第5個 ) 到最後一個

-n+5 前5個 ( 包含第5個 ) ...

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15 ...
n+5	從第5個開始 ( 包含第5個 ) 到最後一個
-n+5	前5個 ( 包含第5個 ) ...

示例程式碼1

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3新增結構偽類選擇器</title>
    <style>
        /* 1. 選擇ul裡面的第一個孩子 小li */
        ul li:first-child {
            background-color: pink;
        }

        /* 2. 選擇ul裡面的最後一個孩子 小li */
        ul li:last-child {
            background-color: pink;
        }

        /* 3. 選擇ul裡面的第二個孩子 小li */
        ul li:nth-child(2) {
            background-color: skyblue;
        }

        /* 4. 選擇ul裡面的第六個孩子 小li */
        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ul>
</body>

</html>

執行結果

示例程式碼2

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3新增結構偽類選擇器-nth-child</title>
    <style>
        /* 1. 把所有的偶數 even 的孩子選出來 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2. 把所有的奇數 odd 的孩子選出來 */
        ul li:nth-child(odd) {
            background-color: gray;
        }

        /* 3. nth-child(n) 從0開始 每次加1 從後面計算 相當於選擇了所有的孩子 (這裡面必須是n 不能是其他的字母) */
        /* ol li:nth-child(n) {
            background-color: pink;
        } */

        /* 4. nth-child(2n) 選擇了所有的偶數的孩子 等價於 even */
        /* ol li:nth-child(2n) {
            background-color: pink;
        } */

        /* 5. nth-child(2n+1) 選擇了所有的奇數的孩子 等價於 odd */
        /* ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */

        /* 6. nth-child(n+3) 從第3個開始 ( 包含第 3 個 ) 到最後 */
        /* ol li:nth-child(n+3) {
            background-color: skyblue;
        } */

        /* 7. nth-child(-n+3) 前3個 ( 包含第 3 個 ) */
        ol li:nth-child(-n+3) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ul>

    <ol>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ol>
</body>

</html>

執行結果

nth-child 和 nth-of-type 的區別：

nth-child 對父元素裡面所有孩子排序選擇 ( 序號是固定的 ) 。先找到第 n 個孩子，然後看看是否和 E 匹配
nth-of-type 對父元素裡面指定子元素進行排序選擇。先去匹配 E，然後再根據E 找第n個孩子

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3新增nth-of-type選擇器</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }

        ul li:last-of-type {
            background-color: pink;
        }

        ul li:nth-of-type(even) {
            background-color: skyblue;
        }

        /* nth-child 會把所有的盒子都排列序號 */
        /* 執行的時候首先看 :nth-child(1) 之後會去看 前面的 div */
        section div:nth-child(1) {
            background-color: red;
        }

        /* nth-of-type 會把指定元素的盒子排列序號 */
        /* 執行的時候首先看 div指定的元素 之後會去看 後面的 nth-of-type(1) 第幾個孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1個孩子</li>
        <li>我是第2個孩子</li>
        <li>我是第3個孩子</li>
        <li>我是第4個孩子</li>
        <li>我是第5個孩子</li>
        <li>我是第6個孩子</li>
        <li>我是第7個孩子</li>
        <li>我是第8個孩子</li>
    </ul>
    <!-- 區別 -->
    <section>
        <p>光頭強</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

執行結果

2.3 偽元素選擇器

偽元素選擇器可以幫助我們利用 CSS 建立新標籤元素，而不需要 HTML 標籤，從而簡化 HTML 結構。

選擇符	簡介
::before	在元素內部的前面插入內容
::after	在元素內部的後面插入內容

注意：

before 和 after 建立一個元素，但是屬於行內元素
新建立的這個元素在文件樹中是找不到的，所以我們稱為偽元素
語法：element::before {}
before 和 after 必須有 content 屬性
before 在父元素內容的前面建立元素，after 在父元素內容的後面插入元素
偽元素選擇器和標籤選擇器一樣，權重為1

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>偽元素選擇器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before {
            display: inline-block;
            /* 這個content是必須要寫的 */
            content: '我';
            width: 30px;
            height: 40px;
            background-color: purple;
        }

        div::after {
            content: '小豬佩奇';
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>

</html>

執行結果

偽元素選擇器使用場景1：偽元素字型圖示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>偽元素選擇器使用場景-字型圖示</title>
    <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>

</html>

執行結果

偽元素選擇器使用場景2：防土豆效果

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿土豆網顯示隱藏遮罩案例</title>
    <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;
        }

        /* 當我們滑鼠經過了 土豆這個盒子，就讓裡面的before層顯示出來 */
        .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>
</body>

</html>

執行結果

偽元素選擇器使用場景3：偽元素清除浮動

偽元素的兩種清除浮動方法是額外標籤法的一個升級和優化。

3. CSS3 盒子模型

CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：即可指定為 content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

box-sizing：content-box; 盒子大小為 width + padding + border ( 以前預設的 )
box-sizing：border-box; 盒子大小為 width

如果盒子模型我們改為了 box-sizing：border-box; 那 padding 和 border 就不會撐大盒子了 ( 前提 padding 和 border 不會超過 width 寬度 )

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3盒子模型</title>
    <style>
        /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } */

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型 盒子最終的大小就是 width 200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        小豬喬治
    </div>
    <p>
        小豬佩奇
    </p>
</body>

</html>

執行結果

4. CSS3 其他特性

4.1 圖片變模糊

CSS3濾鏡filter：

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。

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

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖片模糊處理filter</title>
    <style>
        img {
            /* blur是一個函式 小括號裡面數值越大，圖片越模糊 注意數值要加px單位 */
            filter: blur(15px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="images/pink.jpg" alt="">
</body>

</html>

執行結果

4.2 計算盒子寬度 width: calc 函式

CSS3 calc 函式：

calc() 此 CSS 函式讓你在宣告 CSS 屬性值時執行一些計算。

width: calc(100% - 80px);

括號裡面可以使用 + - * / 來進行計算。

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3屬性calc函式</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 需求：我們的子盒子寬度永遠比父盒子小30畫素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

執行結果

5. CSS3 過渡

過渡 (transition) 是 CSS3 中具有顛覆性的特徵之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素新增效果。

過渡動畫：從一個狀態漸漸地過渡到另外一個狀態

可以讓我們地頁面更好看，更動感十足，雖然低版本瀏覽器不支援( IE9 以下版本 )，但是不會影響頁面佈局。

我們現在經常和 :hover 一起搭配使用。

transition: 要過渡的屬性 花費時間 運動曲線 何時開始;

屬性：想要變化地 CSS 屬性，寬度高度背景顏色內外邊距都可以。如果想要所有的屬性都變化過渡，寫一個 all 就可以。
花費時間：單位是秒 ( 必須寫單位 ) 比如 0.5s
運動曲線：預設是 ease ( 可以省略 )
何時開始：單位是秒 ( 必須寫單位 )，可以設定延遲觸發時間預設是 0s ( 可以省略 )

記住過渡的使用口訣：誰做過渡，給誰加

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3 過渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 變化的屬性 花費時間 運動曲線 何時開始; */
            /* transition: width .5s ease 1s, height .5s ease 1s; */
            /* 如果想要寫多個屬性，利用逗號進行分割 */
            /* transition: width .5s, height .5s; */
            /* transition: height .5s ease 1s; 兩個分開寫會樣式衝突 */
            /* 如果想要多個屬性都變化，屬性寫all就可以了 */
            /* 誰做過渡，給誰加 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

執行結果

CSS3 過渡-進度條案例

示例程式碼

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3過渡練習-進度條</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 誰做過度給誰加 */
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>

執行結果

CSS學習35-CSS3的新特性

CSS3 的新特性 1. CSS3 的現狀新增的 CSS3 特性有相容性問題，ie9+才支援移動端支援優於 PC 端

css3新特性總結

選擇器　 :last-child /* 選擇元素最後一個孩子 */ :first-child /* 選擇元素第一個孩子 */

【Web前端開發入門】【第5講】CSS3新特性

技術標籤：WEB開發入門說明本文僅為參照北京林業大學《Web前端開發》課程的相關筆記原課程連結

CSS3 新特性

CSS3 新特性一、CSS3 新增選擇器 1、屬性選擇器屬性選擇器可以根據元素特定屬性來選擇元素，這樣就不用藉助類或者id選擇器

HTML5和css3新特性

HTML5和css3新特性 css新特新：屬性選擇器屬性選擇器分為三種: 1、基本選擇器 2、偽類選擇器

html 標記分類字幕,css3新特性

文章目錄標記分類css定義方法偽類樣式繼承和作用順序樣式繼承==作用順序== css屬性css3

CSS3新特性

1、新選擇器E:nth-child(n)-選擇器匹配其父元素的第n個子元素，不論元素型別，n可以是數字、關鍵字或公式E:nth-of-type(n)-選擇與之其匹配的父元素的第N個子元素E:frist-child-相對於父級做參考，“所有”子元素的第

CSS Selectors Level 4新特性全面解析

前言當看到 CSS Selectors Level 4 很多人會理所當然地喊出 CSS4。但是，這裡必須明確一個概念，目前所謂的 CSS3 和 CSS4 都是 CSS2.1 以後對某一些 CSS 模組進行升級更新後的稱呼。CSS3 和 CSS4 永遠都不會出現，它

學習一波Vue3新特性

前言去年前端界最轟動的事無非是React Hook的釋出，上到react-router、react-redux等生態庫，下到React應用開發者都從class component開發方式積極擁抱Hook。那今年我認為最值得關注的是Vue3.0，目前我們可以從vue-

java8新特性學習

Lambda表示式：ide //原來的匿名內部類 @Test public void test1(){ Comparator<String> com = new Comparator<String>(){

Vue3新特性之在Composition API中使用CSS Modules

在 Vue 3 Composition API 最近的一次 beta 升級中，無論是 Vue 3 本 3 庫 vue-next，還是面向 Vue 2 過渡用的 @vue/composition-api 庫中，都同步更新了一個 useCSSModule 函式 -- 用來在使用了 Composition API 的