品|開源中國

Chrome 106 已發布，Chrome 博客顯示，Chrome 106 中有 20 個安全修復程序。其中有 5 個 “高” CVE 級別的安全漏洞和 8 個 “中等” 嚴重性漏洞。其次，Chrome 106 中包含大量新功能，比如：

新的 Intl APIs

Chrome 106 添加了一系列新的 Intl API ，包含大量數字格式功能，有助于以本地化格式顯示內容（貨幣符號的解析、格式化日期和時間的標準等...）。

與其他 Intl API 一樣，新的 Intl API 將解析內容的負擔轉移給了系統，無需向每個用戶發送或維護復雜的本地化代碼。

查看 MDN 上的 Intl Number Format 文檔以獲取更多信息

新的 CSS 功能

• CSS 'ic' 長度單位

新的長度單位：ic，ic 類似于 ch。但是 ic 專門用于以使用表意文字的語言（漢字屬于表意文字，因此中日韓三種語言都適用 ic 長度）編寫的文本，它根據這個字符 [某個點] 的寬度或高度來測量長度。

無論文本大小如何，ic 單位都能提供可預測的控制。例如，如果設置 max-width 容器的長度是 10ic，則容器最多只能包含 10 個全角字形，無論字體大小如何。

CSS Grid 即將支持 grid-template-columns 和 grid-template-rows 的插值，它計劃在 106 中，但已延遲，并將在 Chrome 107 中推出。

棄用

在 requestFileSystem () 中棄用對 window.PERSISTENT 配額類型的支持。

棄用 cookie 域屬性中的非 ASCII 字符

為了與 RFC 6265bis 中的最新規范保持一致，Chromium 將拒絕具有包含非 ASCII 字符的 “域” 屬性的 cookie（例如 Domain=é xample.com）。

SerialPort BYOB 閱讀器支持

將 SerialPort 提供的 ReadableStream 的基礎數據源更新為可讀字節流。此更改與調用不帶參數的 port.readable.getReader () 的現有代碼向后兼容。開發人員可以通過調用 getReader ({ mode: 'byob'}) 來檢測對 BYOB 閱讀器的支持，因為舊實現在傳遞新參數時會拋出 TypeError。

取消前綴 -webkit-hyphenate-character CSS 屬性

此更改支持不帶前綴的連字符，而不僅是 -webkit - 連字符。根據 csswg 的討論，https://github.com/w3c/csswg-drafts/issues/6887，hyphenate-character css 屬性足夠穩定可以發布。

Chrome 106 中的其他更改：

• Chrome DevTools 中的新功能 (106)

• Chrome 106 棄用和刪除

• ChromeStatus.com 針對 Chrome 106 的更新

• Chromium 源代碼庫更改列表

• Chrome 發布日歷

于在CSS中實現容器的長寬比最初的創意是來自于在Web中如何實現縱橫比。主要是用于響應式設計中的iframe、img和video之類的元素。隨之擴展為適用于任何容器的長寬比。那在CSS中到底有多少種方案可以實現呢？我一向喜歡做這樣的事情，到處搜集多種解決方案。

如果你看到前面的兩篇文章，或許你知道一些方法，或者說所有的方案你都想到了。如果是這樣的話，你可以停止閱讀這篇。如果沒有的話，你可以繼續往下閱讀。

長寬比故事

長寬比在影視制作中又被稱之為寬高比，指的是一個視頻的寬度除以它的高度所得到的比例，通常表示為x:y或x×y，其中的冒號和叉號表示中文的“比”之意。目前，在電影工業中最常被使用的是anamorphic比例（即2.39:1）。傳統的4:3仍然被使用于現今的許多電視畫面上，而它成功的后繼規格16:9則被用于高清晰度電視或數字電視上。常見的比例：

HTML結構

使用CSS實現容器長寬比，常見的HTML模板結構有兩種：

<div class="aspectration" data-ratio="16:9">
    <div class="content"></div>
</div>

另外一種結構是：

<div class="aspectration" data-ratio="16:9"> </div>

具體使用的時候，根據自己的使用場景采用不同的結構。

CSS實現長寬比例方案

前面也提到過了，使用CSS實現長寬比方案有多種，下面簡單的羅列一下這些方案。不過每種方案都不會詳細介紹，因為代碼非常簡單，看一眼代碼就能明白其中原理。

垂直方向的padding

這是最早提出的一種實現方案，主要借助的原理是利用padding-top或者padding-bottom的百分比值，實現容器長寬比。在CSS中padding-top或padding-bottom的百分比值是根據容器的width來計算的。如此一來就很好地實現了容器的長寬比。采用這種方法，需要把容器的height設置為0。而容器內容的所有元素都需要采用position:absolute，不然子元素內容都將被padding擠出容器（造成內容溢出）。

比如我們容器的長寬比是16:9，那么根據比例計算：100% * 9 / 16可以得到56.25%。如果你希望的是4:3，那么對應的就是100% * 3 / 4。

具體的CSS代碼如下：

.aspectration {
    position: relative; /*因為容器所有子元素需要絕對定位*/
    height: 0; /*容器高度是由padding來控制，盒模型原理告訴你一切*/
    width: 100%; 
}
.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}
.aspectration[data-ratio="4:3"]{
    padding-top: 75%;
}

通過通配符*選擇器，讓其子元素的寬高和容器.aspectration一樣大小：

.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

padding & calc()

這個方案采用的是padding和calc()配合在一起使用。其實原理和第一個方案是一樣的。只不過在第一個方案中，我們每次都需要對padding的值進行計算，如果使用calc()可以通過瀏覽器直接計算出padding的百分比值。

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

padding & CSS變量

對于變量而言，以前是其他計算器語言和CSS處理器的特性，不過值得特性的是，現在也是CSS的特性。接下來的這個方案也是基于padding原理，只不過是借助于CSS變量特性，讓前面的方案變得更為靈活一些。使用CSS的變量時，可以把HTML中data-ratio去掉了。換成style="--aspect-ratio:16/9"，也可以是style="--aspect-ratio:1.4;"。同時也可以借助于第二個方案中的calc()。因為CSS的變量和calc()函數的結合是一種完美的結合。

.aspectration[style*="--aspect-ratio"] {
    padding-top: calc(100% / (var(--aspect-ratio)));
}

padding & 偽元素

前面的方案都是在.aspectration元素上使用padding值。但在CSS中，還可以使用CSS的偽元素::before或::after來撐開容器。

.aspectration {
    position: relative;
}
.aspectration:after {
    content: "";
    display: block;
    width: 1px;
    margin-left: -1px;
    background-color: orange;
}
.aspectration[data-ratio="16:9"]:after {
    padding-top: 56.25%;
}
.content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

視窗單位

CSS新特性中提供了一種新的單位vw。了解過這個單位的同學都知道，瀏覽器100vw表示的就是瀏覽器的視窗寬度(Viewport)。打個比方說，如果你的瀏覽器是1334px，那么對就的100vw=1334px。這個時候也就是說1vw=13.34px。這里的100vw也對應前面方案中的100%。這樣我們就可以把前面的%單位換成vw的單位。打個比方說，16:9對應的就是100vw * 9 / 16=56.25vw。這個值可以用在padding-top或者padding-bottom中。但這里演示的不再是padding了，而是把這個值給height。

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
}

上面的示例中width的值是30vw,那么對應的height值就是30vw * 9 / 16=16.875vw。

視窗單位 & CSS Grid

這是一個很有創意的解決方案，使用的都是CSS新特性：視窗單位和CSS Grid Layout。簡單說一下其中的實現原理：將容器.aspectration通過display:grid聲明為一個網格容器，并且利用repeat()將容器劃分為橫向比例，比如16，那么每一格的寬度對應的就是100vw * 9 / 16=6.25vw。同樣使用grid-auto-rows，將其設置的值和橫向的值一樣。在子元素上通過grid-column和grid-row按比例合并單元格。

.aspectration {
    display: grid;
    grid-template-columns: repeat(16, 6.25vw);
    grid-auto-rows: 6.25vw;
}
.aspectration[data-ratio="16:9"] .content {
    grid-column: span 16;
    grid-row: span 9;
}

未來原生方案 aspect-ratio

在WICG的討論上，有人提出來了原生的長寬比屬性aspect-ratio。例如，給定一個容器元素它的width和height都設置為auto，并且aspect-ratio的值為2/1，max-height:200px。一個容器寬度為500px時，元素首先會設置width:500px，然后根據aspect-ratio比例將height設置為250px。這個時候其實違反了max-height的約束。相反，容器大小會變成height: 200px和width:400px。另外，如果元素的max-width是450px時，長寬比將會完全被忽視，因為無法滿足。

如果把width設置為一個百分比，高度不設置一個固定值:

.aspectration[data-ratio="16:9"] {
    width: 100%;
    height: aspect-ratio(16/9);
}

現在討論討論趨勢是把aspect-ratio屬性值變成屬性，比如：

.aspectration[data-ratio="16:9"] {
    width: 100%;
    aspect-ratio: calc(16/9);
}

到目前為止，還沒有任何瀏覽器支持該屬性，但我們可以借助PostCSS Aspect Ratio插件來實現上述的功能：

TML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。

web標準包含了下面三個方面：

• 結構標準（HTML）：用于對網頁元素進行整理和分類。
• 表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
• 行為標準（JavaScript）：用于定義網頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。

Html5新特性：

• 用于繪畫的 canvas 元素。
• 用于媒介回放的 video 和 audio 元素。
• 對本地離線存儲的更好的支持。
• 新的特殊內容元素，比如 article、footer、header、nav、section。
• 新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關于viewport

viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
• height：和 width 相對應，指定高度。
• initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
• maximum-scale：允許用戶縮放到的最大比例。
• minimum-scale：允許用戶縮放到的最小比例。
• user-scalable：用戶是否可以手動縮放。

常見元素

head區域元素：

meta title style link script base。

body區域元素：

• div、section、article、aside、header、footer
• p
• span、em、strong
• table、thead、tbody、tr、td
• ul、ol、dl、dt、dd
• a
• form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨占一行

• address – 地址
• blockquote – 塊引用
• center – 舉中對齊塊
• dir – 目錄列表
• div – 常用塊級容易，也是css layout的主要標簽
• dl – 定義列表
• fieldset – form控制組
• form – 交互表單
• h1-h6 – 標題
• hr – 水平分隔線
• isindex – input prompt
• menu – 菜單列表
• noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
• noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
• ol – 排序表單
• p – 段落
• pre – 格式化文本
• table – 表格
• ul – 非排序列表

行內元素：元素在同一行水平排列

• a – 錨點
• abbr – 縮寫
• acronym – 首字
• b – 粗體
• big – 大字體
• br – 換行
• em – 強調
• font – 字體設定(不推薦)
• i – 斜體
• img – 圖片
• input – 輸入框
• label – 表格標簽
• s – 中劃線(不推薦)
• select – 項目選擇
• small – 小字體文本
• span – 常用內聯容器，定義文本內區塊
• strike – 中劃線
• strong – 粗體強調
• sub – 下標
• sup – 上標
• textarea – 多行文本輸入框
• tt – 電傳文本
• u – 下劃線
• var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認樣式

很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

• in：英寸，1in=2.54cm=96px
• pc：皮卡，1皮卡=1/16英寸
• pt：點，1點=1/72英寸
• px：像素，1點=1/96英寸

相對單位

• em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
• rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
• 1h：元素的line-height
• vw：視窗寬度的1%
• vh：視窗高度的1%
• vmin：視窗較小尺寸的1%
• vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

文本垂直居中

對于單行文本可以設置行高=盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

• letter-spacing: 0.5em ; 單個字母之間的間距。
• word-spacing: 1em; 單詞之間的間距。
• text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
• color:red; 字體顏色。
• text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
• text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
• text-indent:10px; 文本首行縮進。
• text-shadow:2px 2px #ff0000; 文字陰影效果。
• white-space: normal; 設置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢出處理

• visible：默認值，多余的內容會全部顯示出來。
• hidden：超過元素的內容隱藏。
• auto：內容超出顯示滾動條。
• scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

• background-color:#fff; 設置背景顏色。
• background-image:url(img.png); 設置圖像為背景。
• background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
• background-position:center top; 設置背景圖片在容器的位置，top，bottom，left，right，center。
• background-attachment:scroll; 設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
• background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內容框定位）。
• background-clip:border-box; css3，背景裁切。
• background-size:cover; css3，調整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。

優先級

理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先級規則如下：

• 如果選擇器的ID數量最多的勝出。
• 如果ID數量一致，那么擁有最多類的選擇器勝出。
• 如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。

我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。

兩條經驗法則

1. 盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
2. 不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。

基礎選擇器

• 類型或標簽選擇器，匹配目標元素的標簽名，如 ：p，input[type=text]，優先級（0，0，1）。
• 類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
• ID選擇器，匹配擁有指定ID屬性的元素，如：#id， 優先級（1，0，0）。
• 通用選擇器（*），匹配所有元素 ，優先級（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的復雜選擇器。

• 后代組合器（單個空格（）表示），比如 .nav li，表示li是一個擁有nav類的元素的后代。
• 子組合器（>），匹配的元素是直接后代，.parent > .child。
• 相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
• 通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

復合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態的元素，優先級（0，1，0）。

• :first-child——匹配的元素是其父元素的第一個子元素。
• :last-child——匹配的元素是其父元素的最后一個子元素。
• :only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
• :nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

• :nth-last-child(an+b)——類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
• :first-of-type——類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
• :last-of-type——匹配每種類型的最后一個子元素。
• :only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
• :nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似于：nth-child。
• :nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。
• :not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。
• :focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
• :hover——匹配鼠標指針正懸停在其上方的元素。
• :root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
• :disabled——匹配已禁用的元素，包括input、select以及button元素。
• :enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
• :checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
• :invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。

• ::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
• ::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
• ::first-letter——用于指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
• ::first-line——用于指定匹配元素的第一行文本的樣式。
• ::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。

• [attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
• [attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，如：input[type="radio"]。
• [attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
• [attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
• [attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等于指定的字符串值，如：a[rel="author"]。
• [attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個連字符（-）。

小結

本文要點回顧，歡迎留言交流。

• Web中的一些基本概念介紹。
• Html頁面結構，元素分類。
• Css優先級。
• Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。