10-CSS3選擇器詳解

SS3在CSS2基礎上，增強或新增了許多特性，彌補了CSS2的眾多不足之處，使得Web開發變得更為高效和便捷。

CSS3的現狀

瀏覽器支持程度不夠好，有些需要添加私有前綴
移動端支持優于PC端
不斷改進中
應用相對廣泛

應對的策略：漸進增強

（1）堅持漸進增強的原則：讓低版本瀏覽器能正常訪問頁面，高版本的瀏覽器用戶體驗更好。【重要】

比如說，同樣是一個頭像，可能在低版本的瀏覽器中，頭像方的；在高版本的瀏覽器中，頭像是圓的。

（2）考慮用戶群體。
（3）遵照產品的方案。

參考鏈接：

漸進增強 VS 優雅降級 | 簡書
漸進增強和優雅降級之間的不同（面試題目）

瀏覽器的版本問題

由于CSS3普遍存在兼容性問題，為了避免因兼容性帶來的干擾，瀏覽器的建議版本為：

Chrome瀏覽器 version 46+
Firefox瀏覽器 firefox 42+

如何使用手冊

在查看CSS參考手冊時，需要注意以下符號：

比如說，{1,4}表示可以設置一至四個參數。

下面講CSS3的基礎知識。本文講一下 CSS3 選擇器的內容。

CSS3 選擇器

我們之前學過 CSS 的選擇器，比如：

``` div 標簽選擇器

 .box 類名選擇器

 #box　id選擇器

 div p 后代選擇器

 div.box 交集選擇器

 div,p,span 并集選擇器

 div>p 子代選擇器

 * : 通配符

 div+p: 選中div后面相鄰的第一個p

 div~p: 選中的div后面所有的p

```

CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準度。CSS3選擇器與 jQuery 中所提供的絕大部分選擇器兼容。

屬性選擇器

屬性選擇器的標志性符號是 []。

匹配含義：

^：開頭 $：結尾 *：包含

格式：

E[title] 選中頁面的E元素，并且E存在 title 屬性即可。
E[title="abc"]選中頁面的E元素，并且E需要帶有title屬性，且屬性值完全等于abc。
E[attr~=val] 選擇具有 att 屬性且屬性值為：用空格分隔的字詞列表，其中一個等于 val 的E元素。
E[attr|=val] 表示要么是一個單獨的屬性值，要么這個屬性值是以“-”分隔的。
E[title^="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值以 abc 開頭。
E[title$="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值以 abc 結尾。
E[title*="abc"] 選中頁面的E元素，并且E需要帶有 title 屬性,屬性值任意位置包含abc。

比如說，我們用屬性選擇器去匹配標簽的className，是非常方便的。

這里我們用class屬性來舉例。代碼舉例：

```html <!DOCTYPE html>

CSS3-屬性選擇器

簡介

姓名:
密碼:
性別: 男女
興趣: 寫代碼

E[attr]

E[attr~=attr]

E[attr|=attr]

E[attr*=val]

E[attr^=val]

E[attr$=val]

```

最后來張表格：

、理論知識

1.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什么

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接后發起http請求

d. 服務器端響應http請求，瀏覽器得到html代碼

e. 瀏覽器解析html代碼，并請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現給用戶

參考《一次完整的HTTP事務是怎樣一個過程》

1.2、談談你對前端性能優化的理解

a. 請求數量：合并腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啟GZip，精簡JavaScript，移除重復腳本，圖像優化，將icon做成字體

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存

d. 頁面結構：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向

參考《前端工程與性能優化》

1.3、前端 MV*框架的意義

早期前端都是比較簡單，基本以頁面為工作單元，內容以瀏覽型為主，也偶爾有簡單的表單操作，基本不太需要框架。

隨著 AJAX 的出現，Web2.0的興起，人們可以在頁面上可以做比較復雜的事情了，然后前端框架才真正出現了。

如果是頁面型產品，多數確實不太需要它，因為頁面中的 JavaScript代碼，處理交互的絕對遠遠超過處理模型的，但是如果是應用軟件類產品，這就太需要了。

長期做某個行業軟件的公司，一般都會沉淀下來一些業務組件，主要體現在數據模型、業務規則和業務流程，這些組件基本都存在于后端，在前端很少有相應的組織。

從協作關系上講，很多前端開發團隊每個成員的職責不是很清晰，有了前端的 MV框架，這個狀況會大有改觀。

之所以感受不到 MV*框架的重要性，是因為Model部分代碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。

參考《前端 MV*框架的意義》

1.4、請簡述盒模型

IE6盒子模型與W3C盒子模型。

文檔中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。

CSS3中有個box-sizing屬性可以控制盒子的計算方式，

content-box：padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值。（IE6盒子模型）

參考《盒模型》

1.5、請你談談Cookie的弊端

a. 每個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

c. cookie的最大大約為4096字節，為了兼容性，一般不能超過4095字節

d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。

1.6、瀏覽器本地存儲

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀，是會話級別的存儲。

localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

1.7、web storage和cookie的區別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬

c. cookie還需要指定作用域，不可以跨域調用

d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發者自己封裝setCookie，getCookie

e. Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在，而Web Storage僅僅是為了在本地“存儲”數據而生

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage

1.8、對BFC規范的理解

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規范定義的，關于CSS渲染定位的一個概念。

BFC是頁面CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區域。

BFC的一個最重要的效果是，讓處于BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

利用BFC可以閉合浮動，防止與浮動元素重疊。

參考《Learning BFC》

1.9、線程與進程的區別

a. 一個程序至少有一個進程，一個進程至少有一個線程

b. 線程的劃分尺度小于進程，使得多線程程序的并發性高

c. 進程在執行過程中擁有獨立的內存單元，而多個線程共享內存，從而極大地提高了程序的運行效率

d. 每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制

e. 多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。但操作系統并沒有將多個線程看做多個獨立的應用，來實現進程的調度和管理以及資源分配

1.10、請說出三種減少頁面加載時間的方法

a. 盡量減少頁面中重復的HTTP請求數量

b. 服務器開啟gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript、CSS代碼

f. 使用多域名負載網頁內的多個文件、圖片

參考《減低頁面加載時間的方法》

1.11、你都使用哪些工具來測試代碼的性能？

JSPerf, Dromaeo

1.12、你遇到過比較難的技術問題是？你是如何解決的？

1.13、你常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？

1.14、列舉IE與其他瀏覽器不一樣的特性？

a. IE的排版引擎是Trident （又稱為MSHTML）

b. Trident內核曾經幾乎與W3C標準脫節（2005年）

c. Trident內核的大量 Bug等安全性問題沒有得到及時解決

d. JS方面，有很多獨立的方法，例如綁定事件的attachEvent、創建事件的createEventObject等

e. CSS方面，也有自己獨有的處理方式，例如設置透明，低版本IE中使用濾鏡的方式

參考《Trident（排版引擎）》

1.15、什么叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

參考《優雅降級和漸進增強的區別》

1.16、WEB應用從服務器主動推送Data到客戶端有那些方式？

a. html5 websoket

b. WebSocket 通過 Flash

c. XHR長時間連接

d. XHR Multipart Streaming

e. 不可見的Iframe

f. 標簽的長時間連接(可跨域)

1.17、對前端界面工程師這個職位是怎么樣理解的？

a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高質量完成實現效果圖，精確到1px；

c. 與團隊成員，UI設計，產品經理的溝通；

d. 做好的頁面結構，頁面重構和用戶體驗；

e. 處理hack，兼容、寫出優美的代碼格式；

f. 針對服務器的優化、擁抱最新前端技術。

1.18、你在現在的團隊處于什么樣的角色，起到了什么明顯的作用？

請自行根據自己情況做回答，這個沒有標準答案。

1.19、你的優點是什么？缺點是什么？

請自行根據自己情況做回答，這個沒有標準答案。

1.20、如何管理前端團隊?

請自行根據自己情況做回答，這個沒有標準答案。

1.21、最近在學什么？能談談你未來3，5年給自己的規劃嗎？

請自行根據自己情況做回答，這個沒有標準答案。

1.22、平時如何管理你的項目？

a. 先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

b. 編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

c. 標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；

d. 頁面進行標注（例如頁面模塊開始和結束）；

e. CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）；

f. JS 分文件夾存放命名以該JS功能為準的英文翻譯。

g. 圖片采用整合的 images.png png8 格式文件使用盡量整合在一起使用方便將來的管理

1.23、說說最近最流行的一些東西吧？常去哪些網站？

CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、

underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

1.24、請解釋一下 JavaScript 的同源策略

同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

1.25、AMD和CMD 規范的區別？

AMD 提前執行依賴 - 盡早執行，requireJS 是它的實現

CMD 按需執行依賴 - 懶執行，seaJS 是它的實現

參考《SeaJS與RequireJS最大的區別》、《與 RequireJS 的異同》

1.26、網站重構的理解

重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。

a. 使網站前端兼容于現代瀏覽器(針對于不合規范的CSS、如對IE6有效的)

b. 對于移動平臺的優化，針對于SEO進行優化

c. 減少代碼間的耦合，讓代碼保持彈性

d. 壓縮或合并JS、CSS、image等前端資源

1.27、瀏覽器的內核分別是什么?

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；

1.28、請介紹下cache-control

每個資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存策略

Cache-Control 指令控制誰在什么條件下可以緩存響應以及可以緩存多久

Cache-Control 頭在 HTTP/1.1 規范中定義，取代了之前用來定義響應緩存策略的頭（例如 Expires）。

1.29、前端頁面有哪三層構成，分別是什么？作用是什么？

a. 結構層：由 HTML 或 XHTML 之類的標記語言負責創建，僅負責語義的表達。解決了頁面“內容是什么”的問題。

b. 表示層：由CSS負責創建，解決了頁面“如何顯示內容”的問題。

c. 行為層：由腳本負責。解決了頁面上“內容應該如何對事件作出反應”的問題。

1.30、知道的網頁制作會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg

Webp：谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。

Apng：全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴展，可以實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前得到 iOS safari 8的支持，有望代替GIF成為下一代動態圖標準。

1.31、一次js請求一般情況下有哪些地方會有緩存處理？

a. 瀏覽器端存儲

b. 瀏覽器端文件緩存

c. HTTP緩存304

d. 服務器端文件類型緩存

e. 表現層&DOM緩存

參考《一次HTTP請求中有哪些地方可以緩存》

1.32、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

a. 圖片懶加載，滾動到相應位置才加載圖片。

b. 圖片預加載，如果為幻燈片、相冊等，將當前展示圖片的前一張和后一張優先下載。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖片為css圖片的話。

d. 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。

1.33、談談以前端角度出發做好SEO需要考慮什么？

a. 了解搜索引擎如何抓取網頁和如何索引網頁

b. meta標簽優化

c. 關鍵詞分析

d. 付費給搜索引擎

e. 鏈接交換和鏈接廣泛度（Link Popularity）

f. 合理的標簽使用

顏色設置的簡便方法

昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作》（目錄在結尾）中學習了設置單元格以及其中內容的空間間距和背景顏色。

其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性，而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？

當然有！

開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。

<colgroup></colgroup>標簽是一個給行向單元格打組的標簽，在頁面中不會顯示。

<col></col>標簽是來具體設置行向單元格數量和顏色的標簽。

示例代碼如下：

<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

這段代碼添加到"第一個頁面.html"當中就可以，具體代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

頁面效果如圖：

因為第一列和最后一列只有一行所以，也都變紅了。

其中span的數量代表行數。

如果把span等號后面的數改成2，因為表格只有兩行，所以整個表格都紅了。

表格嵌套

我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

代碼示例如下：我們把"一列一行"分割成列向兩個單元格。

<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border = "1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

這段代碼替換文字"一列一行"即可。

頁面效果如圖所示：

留個思考題，大家可以思考一下行向分割單元格怎么寫。

今天的內容結束了。

全部示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

學到這里，相信大家已經有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話，學完16進制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結束這套教程。

如果您有任何疑問或不解歡迎關注并私信我。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

在線咨詢

上一篇：原生CSS3教你寫一個漂亮的，帶動畫的checkbox效果
下一篇：vue3.xvue-cli4.5引elementui顯示空白

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

10-CSS3選擇器詳解

CSS3的現狀

應對的策略：漸進增強

瀏覽器的版本問題

如何使用手冊

CSS3 選擇器

屬性選擇器

顏色設置的簡便方法

HTML完整學習目錄

您的項目需求