. 介紹CSS權重

A. 什么是CSS權重和它的作用

CSS權重指的是樣式表規則（包括內聯樣式、ID選擇器、類選擇器、標簽選擇器、通配符和繼承屬性）對元素樣式影響的優先級。CSS權重越高，其樣式優先級也越高，會覆蓋掉其他具有低權重的樣式。

具體來說，CSS權重的計算方式為：

• 內聯樣式：權重值為1000
• ID選擇器：權重值為100
• 類選擇器、偽類選擇器、屬性選擇器：權重值為10
• 標簽選擇器、偽元素選擇器：權重值為1
• 通用選擇器（*）的權重值為0，但如果它與其他選擇器組合使用時，會根據組合選擇器的權重進行計算
• 繼承屬性沒有權重

CSS權重的作用在于解決多個樣式規則同時作用于一個元素時的樣式沖突問題，為頁面提供了更細粒度的控制。通過設置適當的CSS權重，可以確保頁面元素的樣式在多個樣式規則中按照預期方式進行呈現。

B. 為什么我們需要了解CSS權重

了解CSS權重對于編寫高質量的CSS樣式表非常重要，原因如下：

1. 避免樣式沖突：權重的作用在于解決多個CSS規則同時作用于一個元素時的樣式沖突問題，通過了解權重計算規則，可以更好地控制和避免樣式沖突。
2. 確保樣式優先級：在CSS的開發中，我們可能需要定義多個CSS規則，但我們需要確保當兩個規則同時匹配一個元素時，它們的優先級正確，并按照預期順序應用。
3. 優化樣式表結構：了解CSS權重的規則可以幫助我們優化CSS樣式表的結構和優先級，更好地利用CSS選擇器的規則來減少權重的計算并簡化開發流程。
4. 提高代碼可讀性：遵循權重計算規則有助于提高代碼的可讀性和可維護性，可以輕松地通過樣式的權重值來判斷樣式的優先級，并在需要時對其進行更改。

因此，理解CSS權重計算規則是編寫高質量CSS代碼的重要一步。

II. CSS權重計算規則

A. 解析選擇器的基本結構

CSS選擇器是用于選擇和描述HTML或XML文檔中的元素的模式。

選擇器的基本結構包括：

1. 元素選擇器：通過HTML或XML文檔中元素的名稱進行選擇，例如 “h1”, “p”, “a” 等等。
2. 類選擇器：通過類名來選擇元素，使用 .class 標記表示，例如 “.container”, “.btn”, “.nav” 等等。
3. ID 選擇器：通過 ID 名稱來選擇元素，使用 #id 標記表示，例如 “#header”, “#footer”, “#sidebar” 等等。
4. 屬性選擇器：通過屬性名稱或屬性值來選擇元素，例如 a[target=“_blank”] 會選擇所有帶有 target 屬性且屬性值為 “_blank” 的 元素。
5. 偽類選擇器：用于選擇元素的特定狀態，例如:hover偽類可以在元素鼠標懸停時應用樣式。
6. 偽元素選擇器：用于選擇元素的特定部分，例如::before或::after可以在元素前或后插入內容。

以上這些選擇器可以組合在一起并嵌套，形成更復雜的選擇模式。

例如，組合選擇器的形式如下:

1. 子選擇器：用于選擇文檔中的特定元素，即選擇器的子級。
2. 后代選擇器：類似于子選擇器，但它適用于選擇器的后代，不一定是直接子級。
3. 兄弟選擇器：選擇元素后面的同級兄弟元素，或者是之前的同級兄弟元素。
4. 相鄰兄弟選擇器：選擇在當前元素后面且緊隨其后的同級兄弟元素。

以上這些選擇器的靈活組合可以滿足多樣化的選擇需求。知道如何結合使用和優化選擇器對于撰寫高效、可維護的 CSS 代碼非常重要。

B. 計算CSS的權重

CSS 權重用于定義多個 CSS 規則什么時候應該優先應用。我們可以根據規則計算并比較它們的權重來確定最終的樣式規則。

CSS 權重的計算方法如下：

1. 內聯樣式 (Inline styles) 的權重值是1000。
2. ID選擇器 (id selectors) 的權重值是100。
3. 類選擇器 (class selectors)、屬性選擇器 (attribute selectors)和偽類選擇器 (pseudo-class selectors) 的權重值是10。
4. 標簽選擇器 (tag selectors)、偽元素選擇器 (pseudo-element selectors) 的權重值是1。
5. 通配選擇器 (*) 的權重值為0；但是如果它與其他選擇器組合使用時，則根據組合選擇器的權重進行計算。

計算過程：

• 對于一條 CSS 規則，從左到右分解選擇器序列，每解析一種選擇器，權重值就加上其對應的值。
• 如果權重相同，則后面的規則優先級最高，依次類推。
• 如果樣式沒有顯式聲明，將從樣式表定義或者默認瀏覽器的值繼承而來，它的權重就是0。

下面舉例說明幾種不同情況下 CSS 權重的計算方法：

1. 如果規則包含內聯樣式，那么它的權重是1000。
2. 如果規則只包含標簽選擇器，那么它的權重是1。
3. 如果規則包含一個 ID 選擇器 和一個類選擇器，那么它的權重是110 (100+10)。
4. 如果規則包含一個屬性選擇器和一個偽元素選擇器，那么它的權重是11 (10+1)。

由于 CSS 選擇器的組合方式非常靈活，因此需要小心使用，并確保正確計算權重，以免產生樣式覆蓋等問題。

C. 各種選擇器的權重級別

1. 選擇器類型

CSS 中有多種選擇器類型，每種類型的權重級別是不同的。下面是各種選擇器類型的權重級別：

1. 內聯樣式（Inline styles）：權重值最高，1000。
2. ID 選擇器（ID selectors）：權重值為100。
3. 類選擇器（class selectors）、屬性選擇器（attribute selectors）、偽類選擇器（pseudo-class selectors）：權重值為10。
4. 元素選擇器（tag selectors）、偽元素選擇器（pseudo-element selectors）：權重值為1。
5. 通用選擇器（universal selector）和組合選擇器（combinators）（包括子選擇器（child selector）、相鄰兄弟選擇器（adjacent sibling selectors）和通用兄弟選擇器（general sibling selectors））的權重值為0。

根據以上規則計算同一元素上不同選擇器的權重，可以確定最終的樣式，同時也可以避免選擇器的沖突和樣式的覆蓋。

需要注意的是，在實際應用中，多個選擇器組合在一起的復合選擇器（compound selectors）會影響權重的計算。比如 .class1 .class2，權重是 class 為 10，而不是 20。

CSS 的選擇器類型有很多種，常見的選擇器類型如下：

1. 元素選擇器 (tag selectors)：選擇 HTML 文檔中所有指定名稱的元素，如 p、h1、a 等。
2. 類選擇器 (class selectors)：通過指定元素中的 class 屬性來選擇元素，用點號（.）表示，如 .class1、.class2。
3. ID 選擇器 (id selectors)：通過指定元素中的 id 屬性來選擇元素，用井號（#）表示，如 #header、#sidebar。
4. 屬性選擇器 (attribute selectors)：通過元素具有的屬性和屬性值來選擇元素，如 [type=“submit”]。
5. 偽類選擇器 (pseudo-class selectors)：用于選擇處于特定狀態的元素，如:hover、:active、:focus 等。
6. 相鄰兄弟選擇器 (adjacent sibling selectors)：選擇緊隨在另一個元素后面的元素，使用加號 (+) 表示，如 h1 + p。
7. 通用兄弟選擇器 (general sibling selectors)：選擇在另一個元素后面的所有元素，使用波浪號（~）表示，如 h1 ~ p。
8. 子元素選擇器 (child selectors)：選擇指定元素的直接子元素，使用大于號（>）表示，如 ul > li。
9. 后代元素選擇器 (descendant selectors)：選擇指定元素的所有后代元素，使用空格符表示，如 ul li。
10. 偽元素選擇器 (pseudo-element selectors)：選擇元素的某些特定部分，如 ::before、::after。
11. 否定偽類選擇器 (negation pseudo-class)：選擇不符合指定選擇器的元素，使用: not() 表示。

這些選擇器類型可以根據需求進行組合，形成不同的選擇器模式，能夠支持更復雜的選擇。例如，可以使用 class 選擇器和偽類選擇器結合，來選擇頁面中特定的菜單組件，也可以使用后代選擇器和屬性選擇器，來選擇頁面中特定的表單元素。

2. ID選擇器

ID 選擇器（ID selector）是一種 CSS 選擇器，用于標識 HTML 元素的唯一標識。它通過匹配 HTML 元素的 id 屬性的值來選擇元素。在 CSS 規則中，ID 選擇器需要以 “#” 符號開頭，后面跟著 id 的值。

ID 選擇器的使用方法是，為 HTML 元素設置一個 id 屬性，并在 CSS 樣式表中為該元素的 ID 選擇器指定樣式。例如，在 HTML 中設置一個帶有 id 屬性的鏈接元素：

<a href="#" id="my-link">Click here</a>

然后，在 CSS 樣式表中，使用該鏈接元素的 ID 選擇器來設置樣式：

#my-link {
  color: red;
  text-decoration: none;
}

在上例中，ID 選擇器 “#my-link” 指定鏈接元素的顏色為紅色，且沒有下劃線。需要注意的是，ID 選擇器唯一標識頁面中的某個元素，每個元素只能有一個 ID，而且 ID 選擇器的權重很高，比其他選擇器都要高，因此應該慎重使用。

鑒于 ID 選擇器的高權重和唯一性，它常用于給頁面中的某些元素添加特別的樣式，如頁面頂部的 LOGO、導航、側邊欄、頁腳、表單等等。

3. Class選擇器

Class 選擇器（class selector）是一種 CSS 選擇器，它用于選擇擁有相同 class 屬性值的 HTML 元素。在 CSS 規則中，Class 選擇器以 “.”（英文句號）開頭，后面緊跟著類名。

Class 選擇器的使用方法是，在 HTML 元素的 class 屬性中指定類名，并通過 CSS 樣式表中的類名選擇器來定義該類元素的樣式。例如，在 HTML 中為一個段落元素定義 class 屬性：

<p class="intro">這是一段簡介</p>

然后，在 CSS 樣式表中，使用該段落元素的類名選擇器來設置樣式：

.intro {
  font-size: 18px;
  color: #333;
}

在上例中，Class 選擇器 “.intro” 指定段落元素的字體大小為 18 像素，顏色為 #333。

Class 選擇器可以應用于頁面中多個元素，一個元素可以擁有多個類名，而且類名之間可以以空格分隔。例如：

<div class="container header">...</div>

以上是一個擁有兩個類名的 div 元素，它將繼承所有類名定義的樣式。

Class 選擇器的使用相對靈活，因此在樣式表中廣泛使用。它可以幫助開發者快速改變一組元素的樣式，也可以用于指定網站中的主色調、邊距、定位等屬性。

4. 元素選擇器

元素選擇器是CSS中最基本的選擇器類型之一，它通過匹配HTML元素的標簽名稱來選擇樣式。它使用單一元素的標簽名稱，如div、p、h1、span等作為選擇器。

一個元素選擇器在CSS中的定義方式非常簡單，就是使用HTML元素名作為選擇器，例如：

p {
  color: blue;
}

上面的代碼將文本的顏色樣式設置為藍色。它會選擇HTML文檔中所有的<p>元素，并將他們的顏色樣式設置為藍色，從而改變了文本的顏色。

元素選擇器的優點是易于使用和定義。但是，它也有一些缺點，因為它只使用標簽名稱來匹配元素。它無法限制所匹配的元素具有特定的類或ID屬性，也不能選擇某個元素在其父級元素內的位置。

總體而言，元素選擇器是CSS樣式定義中最基本和經典的方式之一，可以作為基準選擇器，隨著更復雜和精細的選擇器的逐漸引入，它的應用也越來越廣泛。

5. 通配符

通配符（wildcard）是 CSS 選擇器中的一種選擇方式，使用 * 作為選擇器。它可以匹配頁面中的所有元素，因此被稱為萬能選擇器。

通配符的使用方法是，在 CSS 樣式表中使用 * 符號作為選擇器：

* {
  box-sizing: border-box;
}

在上面的代碼中，使用了通配符來指定頁面中所有元素的 box-sizing 屬性為 border-box。這種寫法的效果相當于在 HTML 頁面的所有元素中都聲明了 box-sizing 屬性。

通配符應該謹慎使用，因為它會遞歸遍歷整個文檔，使瀏覽器處理的時間變長，也不利于性能優化。通配符可能會導致特定的樣式被覆蓋或無法繼承，因此在實際開發中不建議經常使用。

6. 繼承

CSS繼承是一種CSS樣式定義的機制，它允許樣式從一個元素傳遞到其子元素，從而節省CSS代碼和減少樣式的重復定義。

CSS中的繼承是通過使用inherit值來實現的，它指示子元素應該繼承父元素的某個CSS屬性。例如，以下代碼將字體顏色設置為藍色：

body {
  color: blue;
}

在這個示例中，color屬性被應用于body元素，我們也可以在子元素繼承該顏色：

p {
  font-size: 14px;
}

使用繼承，我們并沒有在p元素中再次定義color屬性，但是p元素會繼承color屬性，因此該元素中的文本顏色也將是藍色。當然，它也可以通過顯式地定義一個新的color屬性來覆蓋從父元素繼承的該屬性。

需要注意的是，并不是所有的CSS屬性都支持繼承，只有一部分屬性才可以被繼承，如字體樣式、文本排布、顏色等基本元素。例如，background屬性就不支持繼承，所以子元素不會繼承其父元素的背景顏色。

繼承可以提高CSS代碼的可讀性和可維護性，同時也可以減少代碼的冗余度。不過要注意，過多地使用繼承也可能會使得CSS代碼變得過于復雜和難以維護，需要在實際應用中進行權衡和使用。

7. 優先級相同，后定義的覆蓋先定義的

在 CSS 樣式表中，如果有兩個規則應用于同一個元素，且優先級相同，那么后定義的規則會覆蓋先定義的規則。這個原則被稱為“后定義的優先”。

例如，如果頁面中有如下的規則：

p {
  color: red;
}

p {
  color: blue;
}

那么應用于頁面中的所有段落元素的顏色將是藍色，因為后一個規則優先級更高，會覆蓋前一個規則。

需要注意的是，只有在選擇器和屬性相同的情況下，才會使用“后定義的優先”規則。如果這兩個規則中有任何一個選擇器不同，那么不能簡單地使用“后定義的優先”規則。

例如，如果頁面中有如下規則：

p {
  color: red;
}

h1 {
  color: blue;
}

其中第一個規則應用于所有段落元素，而第二個規則應用于所有標題元素，這兩個選擇器不能互相覆蓋。因此，“后定義的優先”規則在這種情況下不適用。

總之，“后定義的優先”規則只適用于同時應用于同一元素并且選擇器和屬性都相同的情況。在編寫 CSS 樣式表時，我們應該注意避免定義相同的規則，以免性能下降和樣式出現不可預期的問題。

III. 總結與思考

A. 總結CSS權重的重要性

CSS 權重是指網頁中元素被樣式引用的優先級，因此很重要。在 CSS 樣式表中，如果存在多個樣式規則可以應用于同一元素，那么 CSS 樣式將根據其權重決定哪一個規則會被應用。

CSS 權重的重要性主要體現在以下幾個方面：

1. 避免樣式沖突和混亂：如果您的 CSS 樣式表包含多個樣式規則可以應用于同一元素，那么需要了解 CSS 權重的規則。明確了 CSS 權重的重要性，可以避免樣式重疊產生樣式沖突和混亂的情況。
2. 提高優先級：使用 ID 選擇器和內聯樣式表可以提高 CSS 權重的優先級，從而避免樣式沖突。您可以通過選擇適當的選擇器和樣式表來控制樣式顯示的優先級。
3. 優化性能：CSS 權重可以提高頁面加載的性能。如果樣式表正確應用了“后定義的優先”規則，那么瀏覽器可以更有效地渲染頁面并減少內存使用。

在編寫 CSS 樣式表時，需要仔細考慮選擇器和樣式規則的設計和順序。理解 CSS 權重的規則和操作方法，可以更好地控制樣式的顯示優先級，并在保證代碼質量的同時提高頁面性能。

B. 如何優化CSS代碼

優化CSS代碼有助于提高網頁的性能和用戶體驗。以下是幾個優化CSS代碼的技巧：

1. 壓縮CSS：通過刪除注釋、空格、換行等可以將CSS文件壓縮到最小。這樣可以減少文件的大小，從而提高頁面加載速度。
2. 合并CSS文件：將多個CSS文件合并成一個文件，可以減少頁面的HTTP請求數量，從而提高頁面加載速度。
3. 避免使用@import：@import指令會導致瀏覽器發出額外的HTTP請求，因此最好直接將所有樣式放在一個文件中，而不是分成多個文件。
4. 使用縮寫：當定義樣式時，可以使用縮寫，如padding、margin等，可以減少代碼量。
5. 避免使用通配符選擇器：通配符選擇器會匹配所有元素，從而影響頁面性能。應該避免或最小化使用通配符選擇器。
6. 避免使用冗余的選擇器：減少選擇器的數量可以提高頁面性能。應避免使用冗余的選擇器，即盡可能地使用特定的選擇器。
7. 避免使用過多的嵌套：過多的嵌套會增加頁面的復雜度，從而影響頁面性能。應盡可能減少選擇器的嵌套層數。
8. 避免使用不必要的!important: !important可以覆蓋其他樣式，但除非必要，否則不要使用它。
9. 將CSS樣式放在標簽中：將CSS樣式放在標簽中，以避免瀏覽器進行解析和渲染之前等待CSS樣式的下載。

總之，優化CSS代碼可以提高頁面性能和用戶體驗，需要遵循一些基本原則和技巧來實現。

C. 如何編寫可維護的CSS

編寫可維護的 CSS 代碼是一項非常重要的技能，以下是一些可行的技巧和最佳實踐：

1. 使用 BEM 命名規則

BEM 是一種簡單易懂的 CSS 命名規范。BEM 命名方式基于塊（block）、元素（element）、修飾符（modifier）等三個概念，可以幫助我們更好地管理 CSS codebase。

BEM 的命名方式一般是 block__element--modifier 的格式，例如：

.main-nav {}
.main-nav__item {}
.main-nav__item--active {}

2. 使用變量

CSS 變量可以幫助我們更輕松地重用顏色、字體大小、間距等屬性，從而簡化整個樣式表的實現。可以通過 :root 選擇器來定義全局變量，例如：

:root {
  --primary-color: #27ae60;
  --nav-height: 80px;
}

.nav {
  height: var(--nav-height);
  background-color: var(--primary-color);
}

3. 避免使用標簽選擇器

避免使用標簽選擇器，而是盡可能使用類選擇器或 ID 選擇器，可以幫助我們更好地封裝和重用樣式，并且避免樣式的混亂和嵌套過多。

4. 布局使用 Flexbox 和 Grid

使用 Flexbox 和 Grid 可以讓您更輕松地管理布局，實現響應式和復雜布局。

5. 避免使用全局樣式

全局樣式會影響整個站點，并且更難以維護。應該盡可能地將樣式限制在特定的組件或模塊中。

6. 使用預處理器

使用預處理器，例如 Sass 或 LESS，可以幫助我們更好地組織和抽象樣式代碼，從而讓代碼更簡潔、更易于維護。

7. 設計統一的代碼風格

在項目中設定統一的 CSS 編碼規范，可以提高代碼的可讀性和可維護性。

總之，可維護的 CSS 代碼是一個循序漸進的過程，在實踐中不斷總結并尋找本質的解決方案，才能對代碼的臃腫和性能瓶頸有所突破。

.“:” 是指令 “v-bind”的縮寫，

<!-- 完整語法 --><a v-bind:href="url">...</a>
<!-- 縮寫 --><a :href="url">...</a>

v-bind 指令可以用于響應式地更新 HTML 特性：

<div id="app-2"><span v-bind:title="message">
  鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span></div>

var app2=new Vue({el: '#app-2',
data: {message: '頁面加載于 ' + new Date().toLocaleString()}})

2.@”是指令“v-on”的縮寫；

<!-- 完整語法 --><a v-on:click="doSomething">...</a>
<!-- 縮寫 --><a @click="doSomething">...</a>

它們不會出現在最終渲染的標記中。縮寫語法是完全可選的

.

@就是是當前項目的路徑

v-on 指令，它用于監聽 DOM 事件：

<a v-on:click="doSomething">...</a>

v- 前綴作為一種視覺提示，用來識別模板中 Vue 特定的特性。

3 . .修飾符

修飾符 (Modifiers) 是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

 (?<=# 斷言要匹配的文本的前綴
 <(\w+)> # 查找尖括號括起來的字母或數字(即HTML/XML標簽)
 ) # 前綴結束
 .* # 匹配任意文本
 (?=# 斷言要匹配的文本的后綴
 <\/\1> # 查找尖括號括起來的內容：前面是一個"/"，后面是先前捕獲的標簽
 ) # 后綴結束