文章目錄
CSS 選擇器
CSS使用選擇器來選擇HTML元素並添加樣式。
CSS選擇器可以基於其id，類，類型，屬性，屬性值等選擇HTML元素。
基礎的選擇器
| 選擇器 | 描述 | 舉例 |
|---|---|---|
| ID 選擇器 | 匹配指定ID屬性值的任意類型元素 | 如 #E{} |
| 類選擇器 | 匹配指定類屬性值的任意類型的任意多個元素 | 如 .E{} |
| 標籤選擇器 | 匹配指定類型的元素 | 如 E{} |
| 通配選擇器 | 匹配文檔中所有元素 | 如 *{} |
| 分組選擇器 | 匹配多個指定元素範圍的並集 | 如 .E,.F{} |
| 交集選擇器 | 匹配每個指定元素範圍的交集 | 如 .E.F{} |
複雜的選擇器
將基本選擇器以幾種方式靈活組合起來，就有了多種複雜選擇器了
| 選擇器 | 描述 | 舉例 |
|---|---|---|
| 後代選擇器 | 匹配該元素下所有後代中的指定元素 | 如 .E .F{} |
| 子選擇器 | 匹配該元素下所有的指定直接子元素 | 如 .E > .F{} |
| 相鄰兄弟選擇器 | 匹配該元素同一個父元素下的第一個該兄弟元素 | 如 .E + .F{} |
屬性選擇器
| 選擇器 | 描述 |
|---|---|
| [屬性] | 匹配 “指定屬性” 的 “所有” 元素 |
| [屬性=“值”] | 匹配 “指定屬性等於值” 的 “所有” 元素 |
| [屬性~=“值”] | 匹配 “指定屬性中包含這個值(獨立的單詞)” 的 “所有” 元素 |
| [屬性|=“值”] | 匹配 “指定屬性中起始爲這個值(獨立的單詞)” 的 “所有” 元素 |
僞元素選擇器
| 選擇器 | 描述 |
|---|---|
| E::after | 用於在一個元素的內容前面插入新內容並設置樣式 |
| E::before | 用於在一個元素的內容後面插入新內容並設置樣式 |
| E::first-letter | 用於向文本的首字母設置樣式 |
| E::first-line | 用於向文本的首行設置樣式 |
動態僞類選擇器
| 選擇器 | 類型 | 描述 |
|---|---|---|
| E:link | 鏈接僞類選擇器 | 匹配的E元素，而且匹配元素被定義了超鏈接並未被訪問過。常用於鏈接描點上。 |
| E:visited | 鏈接僞類選擇器 | 匹配的E元素，而且匹配元素被定義了超鏈接並已被訪問過。常用於鏈接描點上。 |
| E:active | 用戶行爲選擇器 | 匹配的E元素，而且匹配元素被激活。常用於鏈接描點和按鈕上。 |
| E:hover | 用戶行爲選擇器 | 匹配的E元素，而且用戶鼠標停留在元素E上。 |
| E:focus | 用戶行爲選擇器 | 匹配的E元素，而且匹配元素獲取焦點。 |
結構僞類選擇器
| 選擇器 | 描述 |
|---|---|
| E:first-child | 作爲父元素的第一個子元素的元素E。 |
CSS3 選擇器
CSS3新增了許多可使用的選擇器使得前端開發人員在選擇頁面元素時更加靈活。屬性選擇器、結構僞類選擇器、UI元素狀態僞類選擇器、目標僞類選擇器、否定選擇器、通用兄弟選擇器。
複雜的選擇器
| 選擇器 | 描述 | 舉例 |
|---|---|---|
| 通用兄弟選擇器 | 匹配該元素同一個父元素下的所有的該兄弟元素 | 如 .E ~ .F{} |
屬性選擇器
| 選擇器 | 描述 |
|---|---|
| [屬性^=“值”] | 匹配 “指定屬性以指定值開始” 的 “所有” 元素 |
| [屬性*=“值”] | 匹配 “指定屬性包含值(可以是非獨立的單詞)” 的 “所有” 元素 |
| [屬性$=“值”] | 匹配 “指定屬性以指定值結束” 的 “所有” 元素 |
| [屬性!=“值”] | 匹配 “指定屬性不等於值” 的 “所有” 元素 |
僞元素選擇器
| 選擇器 | 描述 |
|---|---|
| E::marker | 用於向列表的前置標記設置樣式 |
| E::selection | 用於文檔中被用戶選中高亮部分設置樣式 |
| E::placeholder | 用於向一個表單元素的佔位文本設置樣式 |
目標僞類選擇器
| 選擇器 | 描述 |
|---|---|
| E:target | 匹配當前活動的目標元素 |
狀態僞類選擇器
| 選擇器 | 類型 | 描述 |
|---|---|---|
| E:checked | 選中狀態僞類選擇器 | 匹配的E元素，而且匹配元素被激活 。常用於複選按鈕或者單選按鈕表單元素上。 |
| E:enabled | 啓用狀態僞類選擇器 | 匹配的E元素，而且匹配元素可用。 常用於表單元素上。 |
| E:disabled | 不可用狀態僞類選擇器 | 匹配的E元素，而且匹配元素不可用。 常用於表單元素上。 |
結構僞類選擇器
| 選擇器 | 描述 |
|---|---|
| E:last-child | 作爲父元素的最後一個子元素的元素E。與E:nth-last-child(1)等同。 |
| E:root | 選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內容相同。 |
| E F:nth-child(n) | 選擇父元素E的第n個子元素F。其中n可以是整數（1，2，3）、關鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值爲1，而不是0。 |
| E F:nth-last-child(n) | 選擇父元素E的倒數第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最後一個元素，與last-child等同。 |
| E:nth-of-type(n) | 選擇父元素內具有指定類型的第n個E元素。 |
| E:nth-last-of-type(n) | 選擇父元素內具有指定類型的倒數第n個E元素。 |
| E:first-of-type | 選擇父元素內具有指定類型的第一個E元素，與E:nth-of-type(1)等同。 |
| E:last-of-type | 選擇父元素內具有指定類型的最後一個E元素，與E:nth-last-of-type(1)等同。 |
| E:only-child | 選擇父元素只包含一個子元素，且該子元素匹配E元素。 |
| E:only-of-type | 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素。 |
| E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文本節點。 |
否定僞類選擇器
| 選擇器 | 描述 |
|---|---|
| E:not(F) | 匹配的E元素中去掉同時匹配的F元素。 |
CSS 引入僞類和僞元素的概念是爲了描述一些現有CSS無法描述的東西。
根本區別在於：它們是否創造了新的元素（抽象）。
僞類：一開始用來表示一些元素的動態狀態，隨後CSS2標準擴展了其概念範圍，使其成爲了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。
僞對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中。
CSS 選擇器權重
權重決定了css規則怎樣被瀏覽器解析直到生效。
當一個標籤同時被多個選擇器選中，需要確定這些選擇器的權重。
| 權重關係 | 選擇器 |
|---|---|
| a | 內聯樣式（取0和1） |
| b | ID 選擇器的個數之和 |
| c | 類選擇器、屬性選擇器以及僞類選擇器的個數之和 |
| d | 標籤選擇器和僞元素選擇器的個數之和 |
按 a-b-c-d 的順序依次比較大小，大的則權重高，相等則比較下一個。
若 a-b-c-d 優先級相同，則後定義的樣式將會被應用。
eg:
body #main .report h1 {
color: red;
/*
權重爲分別是: 0-1-1-2。（有一個id選擇器，1個類選擇器，2個標籤選擇器）
*/
}
!important 聲明的樣式優先級最高，繼承規則得到的樣式的優先級最低。
CSS 選擇器命名
始終堅持以邏輯和語義來命名，反應目的和用途，避免使用表象和晦澀難懂的名稱。採用描述他是幹什麼而不是像什麼的名稱。
選擇器命名採用(Kebab Cas)短橫線分隔命名：字母全小寫，短橫線分隔。
eg:
.student-info{}
.user-info{}
.product-info{}
BEM命名
即Block_Element–Modifier，功能塊_元素–修飾符，是一種前端命名方法，旨在幫助開發者實現模塊化、可複用、高可維護性和結構化的CSS代碼。
| Block | Element | Modifier |
|---|---|---|
| 獨立且有意義的功能塊, e.g. header, container, menu, checkbox, etc. | Block的一部分且沒有獨立的元素, e.g. header title, menu item, list item, etc. | Blocks或Elements的一種修飾，可以用它改變其表現形式、行爲、狀態. e.g. disabled, checked, fixed, etc. |
一個Block下的所有Element無論相互層級如何,都要攤開扁平的屬於Block，所以 BEM 最多隻有 B+E+M 三級。
eg:
.menu{}
.menu_item{}
.menu_item--active{}
OOCSS命名
即Object Oriented CSS，面向對象的CSS，旨在編寫高可複用、低耦合和高擴展的CSS代碼。
OOCSS是以面向對象的思想去定義樣式，應用如模塊化、單一功能原則（Single responsibility principle）和關注點分離（Separation of concerns）等，將公共代碼抽象和實現分離，從而重用。
分離結構樣式與表現樣式
將結構類樣式與表現類樣式分開，這兩類樣式能夠按需組合實現出更多種不同的按鈕樣式，並且提升後期的拓展空間。
| 結構類樣式 | 表現類樣式 |
|---|---|
| .btn .btn-lg .btn-sm 等 | .btn-primary .btn-secondary .btn-success .btn-danger 等 |
分離容器樣式和內容樣式
將容器樣式和內容樣式分開，任何容器可以適應接受任何形式的內容，內容樣式不關注容器DOM 元素及其層次關係。內容樣式是公共的，不要嘗試私有化。
| 容器類樣式 | 內容類樣式 |
|---|---|
| .container .widget .media等 | .text-center .text-ellipsis .gradient-horizontal等 |
CSS 知識題
| 題目 | 答案 |
|---|---|
| margin、padding、border都支持百分比 | border不支持百分比 |
| font-weight屬性值的取值 | 100～900的整百數，每一個都是具有特定含義的關鍵字。 |
| font-face屬性值設置字體 | @font-face引入自定義字體，font- family設置字體 |
| 設置文本內容首字母大寫 | E::first-letter |
| padding內邊距可以是負數 | 不可以 |
| 選擇列表1至3個元素 | ul li:nth-child(-n+3) |
| 控制文字在垂直、水平方向重疊的行高、文字間距屬性 | line-height、letter-spacing |
| display:none和visibility:hidden 的區別 | display隱藏元素不擠佔原空間，visibility隱藏元素但擠佔原空間 |
| 優化css圖片加載技術 | CSS Sprite、SVG Sprite、Iconfont、Base64 |
| 列表最後一個元素不要邊框 | ul li:not(:last-child){ /* border style */} |