10-CSS3選擇器詳解

SS3在CSS2基礎(chǔ)上，增強(qiáng)或新增了許多特性，彌補(bǔ)了CSS2的眾多不足之處，使得Web開(kāi)發(fā)變得更為高效和便捷。

CSS3的現(xiàn)狀

瀏覽器支持程度不夠好，有些需要添加私有前綴
移動(dòng)端支持優(yōu)于PC端
不斷改進(jìn)中
應(yīng)用相對(duì)廣泛

應(yīng)對(duì)的策略：漸進(jìn)增強(qiáng)

（1）堅(jiān)持漸進(jìn)增強(qiáng)的原則：讓低版本瀏覽器能正常訪問(wèn)頁(yè)面，高版本的瀏覽器用戶體驗(yàn)更好。【重要】

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

（2）考慮用戶群體。
（3）遵照產(chǎn)品的方案。

參考鏈接：

漸進(jìn)增強(qiáng) VS 優(yōu)雅降級(jí) | 簡(jiǎn)書
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同（面試題目）

瀏覽器的版本問(wèn)題

由于CSS3普遍存在兼容性問(wèn)題，為了避免因兼容性帶來(lái)的干擾，瀏覽器的建議版本為：

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

如何使用手冊(cè)

在查看CSS參考手冊(cè)時(shí)，需要注意以下符號(hào)：

比如說(shuō)，{1,4}表示可以設(shè)置一至四個(gè)參數(shù)。

下面講CSS3的基礎(chǔ)知識(shí)。本文講一下 CSS3 選擇器的內(nèi)容。

CSS3 選擇器

我們之前學(xué)過(guò) CSS 的選擇器，比如：

``` div 標(biāo)簽選擇器

 .box 類名選擇器

 #box　id選擇器

 div p 后代選擇器

 div.box 交集選擇器

 div,p,span 并集選擇器

 div>p 子代選擇器

 * : 通配符

 div+p: 選中div后面相鄰的第一個(gè)p

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

```

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

屬性選擇器

屬性選擇器的標(biāo)志性符號(hào)是 []。

匹配含義：

^：開(kāi)頭 $：結(jié)尾 *：包含

格式：

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

比如說(shuō)，我們用屬性選擇器去匹配標(biāo)簽的className，是非常方便的。

這里我們用class屬性來(lái)舉例。代碼舉例：

```html <!DOCTYPE html>

CSS3-屬性選擇器

簡(jiǎn)介

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

E[attr]

E[attr~=attr]

E[attr|=attr]

E[attr*=val]

E[attr^=val]

E[attr$=val]

```

最后來(lái)張表格：

得小時(shí)候剛學(xué)電腦時(shí)還是使用MS-DOS作業(yè)系統(tǒng)，家人幫我買了一本厚重的參考書，里頭收錄所有DOS指令，非常詳盡，而這本書也對(duì)我產(chǎn)生不小影響，我知道學(xué)習(xí)任何東西都必須要有正確的參考手冊(cè)，才能夠讓學(xué)習(xí)過(guò)程更全面扎實(shí)。雖然網(wǎng)路上有許多教學(xué)文件，但礙于篇幅都只能夠以最短捷徑來(lái)幫你達(dá)到目的，對(duì)于一些較為復(fù)雜的內(nèi)容來(lái)說(shuō)，這些快速教學(xué)并不能讓你「真正」學(xué)會(huì)，因此最好還是準(zhǔn)備參考手冊(cè)。

本文要推薦的「HTML Reference」網(wǎng)站很不一樣，這個(gè)線上參考手冊(cè)收錄完整HTML語(yǔ)法教學(xué)，依照英文字母順序排列，使用者可以很在這里檢索某個(gè)HTML標(biāo)簽詳細(xì)使用方法，很多可能不在我們平常會(huì)經(jīng)常使用的范圍（例如一些語(yǔ)法設(shè)定方式），但如果你想知道語(yǔ)法要怎么寫才正確，或者想從基礎(chǔ)開(kāi)始學(xué)習(xí)HTML程式碼，請(qǐng)記得將這網(wǎng)站加入書簽。

我記得早先在學(xué)習(xí)制作HTML網(wǎng)頁(yè)時(shí)也有「首頁(yè)制作百寶箱」可以參考，HTML Reference大概就是比較進(jìn)階、內(nèi)容較新較全面的首頁(yè)百寶箱吧！不僅如此，網(wǎng)站還提供實(shí)際范例供使用者參考，也能一鍵點(diǎn)擊快速?gòu)?fù)制語(yǔ)法，對(duì)學(xué)習(xí)來(lái)說(shuō)絕對(duì)大有幫助。雖然HTML語(yǔ)法不是每個(gè)人都會(huì)碰到，但書到用時(shí)方恨少，假如你的工作與它相關(guān)，不妨找時(shí)間惡補(bǔ)一下。

網(wǎng)站名稱：HTML Reference
網(wǎng)站鏈結(jié)：http://htmlreference.io/

使用教學(xué)

第一步

HTMLReference.io網(wǎng)站分成幾個(gè)部分，最上方Collections收錄一些主題，包括常用的基本元素、表單、列表、HTML5語(yǔ)意標(biāo)簽（Semantic）和表格，中間有個(gè)搜尋功能可快速查詢你要找的語(yǔ)法，最重要的就是底下依照英文開(kāi)頭排序的所有HTML語(yǔ)法，點(diǎn)擊可開(kāi)啟詳細(xì)介紹。

第二步

Collection 會(huì)依照語(yǔ)法類別個(gè)別匯整，例如說(shuō)到表單就會(huì)用到form、input、textarea、button 這些標(biāo)簽語(yǔ)法，相信大家不陌生，但你可能不知道每個(gè)語(yǔ)法有這么多種數(shù)值可以設(shè)定，這個(gè)網(wǎng)站最好的地方就在于它會(huì)把所有可以使用的設(shè)定參數(shù)列出來(lái)，并提供你實(shí)際使用范例和說(shuō)明。

如果你已經(jīng)開(kāi)始使用HTML5，對(duì)于一些語(yǔ)意標(biāo)簽應(yīng)該不陌生，HTML Reference 也將這些標(biāo)簽說(shuō)明及范例列在 Semantic Collection。

第三步

回到HTML Reference 首頁(yè)，前面有提到首頁(yè)列出所有HTML 語(yǔ)法標(biāo)簽，依照字母排列，當(dāng)然使用者也能透過(guò)搜尋功能來(lái)快速查找，例如下圖是a 也就是超鏈結(jié)語(yǔ)法的使用教學(xué)，可以看到目標(biāo)鏈結(jié)（href）參數(shù)是必須，網(wǎng)站還列出幾種不同的寫法和用法。

比較可惜的是網(wǎng)站目前只有提供英文版，可能要有一些基礎(chǔ)的英文能力才能比較容易理解，但按照網(wǎng)站編排方式，就算沒(méi)有看說(shuō)明應(yīng)該也能從范例略知一二。

第四步

HTML Reference網(wǎng)站提供的范例、語(yǔ)法都能快速一鍵復(fù)制，只要把滑鼠游標(biāo)移動(dòng)上去，點(diǎn)選后就能自動(dòng)復(fù)制，非常方便！記得以前在學(xué)習(xí)寫網(wǎng)頁(yè)時(shí)都要去手動(dòng)復(fù)制參考資料上的范例或語(yǔ)法教學(xué)，不但很浪費(fèi)時(shí)間，還必須注意有沒(méi)有弄錯(cuò)段落，在這里就不會(huì)遇到相同問(wèn)題。

nicode 聯(lián)盟（Unicode Consortium）

Unicode 聯(lián)盟（Unicode Consortium）開(kāi)發(fā)了 Unicode 標(biāo)準(zhǔn)（Unicode Standard）。他們的目標(biāo)是使用標(biāo)準(zhǔn)的 Unicode 轉(zhuǎn)換格式（即 UTF，全稱 Unicode Transformation Format）取代現(xiàn)有的字符集。

Unicode 標(biāo)準(zhǔn)是一個(gè)成功的創(chuàng)舉，在 HTML、XML、Java、JavaScript、E-mail、ASP、PHP 中都得到實(shí)現(xiàn)。Unicode 標(biāo)準(zhǔn)也得到許多操作系統(tǒng)和所有現(xiàn)代瀏覽器的支持。

Unicode 聯(lián)盟與領(lǐng)先的標(biāo)準(zhǔn)開(kāi)發(fā)組織合作，這些組織有 ISO、W3C 和 ECMA。

Unicode 字符集

Unicode 可以由不同的字符集實(shí)現(xiàn)。最常用的編碼是 UTF-8 和 UTF-16：

字符集	描述
UTF-8	UTF8 中的字符可以是 1 到 4 字節(jié)長(zhǎng)。UTF-8 可以代表 Unicode 標(biāo)準(zhǔn)中的任何字符。UTF-8 向后兼容 ASCII。UTF-8 是電子郵件和網(wǎng)頁(yè)的首選編碼。
UTF-16	16 位 Unicode 轉(zhuǎn)換格式是一種可變長(zhǎng)度的 Unicode 字符編碼，能夠編碼整個(gè) Unicode 指令表。UTF-16 主要用于操作系統(tǒng)和環(huán)境，如 Microsoft Windows、Java 和 .NET。

提示：Unicode 的前 128 個(gè)字符（與 ASCII 一一對(duì)應(yīng)）使用一個(gè)與 ASCII二進(jìn)制值相同的八位組進(jìn)行編碼，使有效的 ASCII 文本在進(jìn)行 UTF-8 編碼時(shí)也是有效的。

提示：所有的 HTML 4 處理器支持 UTF-8，所有的 HTML 5 和 XML 處理器支持 UTF-8 和 UTF-16！

HTML5 標(biāo)準(zhǔn)：Unicode UTF-8

因?yàn)?ISO-8859 中字符集大小是有限的，且在多語(yǔ)言環(huán)境中不兼容，所以 Unicode 聯(lián)盟開(kāi)發(fā)了 Unicode 標(biāo)準(zhǔn)。

Unicode 標(biāo)準(zhǔn)覆蓋了（幾乎）所有的字符、標(biāo)點(diǎn)符號(hào)和符號(hào)。

Unicode 使文本的處理、存儲(chǔ)和運(yùn)輸，獨(dú)立于平臺(tái)和語(yǔ)言。

HTML-5 中默認(rèn)的字符編碼是 UTF-8。

下面列出了一些 HTML5 支持的 UTF-8 字符集：

字符集	十進(jìn)制	十六進(jìn)制
C0 控制與基本的 Latin（C0 Controls and Basic Latin）	0-127	0000-007F
C1 控制與 Latin-1 的補(bǔ)充（C1 Controls and Latin-1 Supplement）	128-255	0080-00FF
Latin 擴(kuò)展 A（Latin Extended-A）	256-383	0100-017F
Latin 擴(kuò)展 B（Latin Extended-B）	384-591	0180-024F

如果 HTML5 網(wǎng)頁(yè)使用不同于 UTF-8 的字符，則需要在 <meta> 標(biāo)簽中指定，如下：

實(shí)例

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：html5 的 Canvas介紹
下一篇：校外培訓(xùn)機(jī)構(gòu)違法違規(guī)行為舉報(bào)渠道公布

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商