程序員web前端培訓分享HTMLCSS學習筆記css3選擇器CSS3是css技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

css3的優點：CSS3將完全向后兼容，所以沒有必要修改現在的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）

漸進增強

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

優雅降級

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

漸進增強 & 優雅降級

區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

CSS3選擇符

· 屬性選擇器

00001. E[attr]：只使用屬性名，但沒有確定任何屬性值

00002. E[attr=“value”]：指定屬性名，并指定了該屬性的屬性值

00003. E[attr~=“value”]：指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”必須的

00004. E[attr^=“value”]：指定了屬性名，并且有屬性值，屬性值是以value開頭的

00005. E[attr$=“value”]：指定了屬性名，并且有屬性值，而且屬性值是以value結束的

00006. E[attr*=“value”]：指定了屬性名，并且有屬性值，而且屬值中包含了value

00007. E[attr|=“value”]：指定了屬性名，并且屬性值僅是value或者以“value-”開頭的值（比如說left-con）

· 偽類選擇器

· 結構性偽類選擇器

00001. X:first-child 匹配子集的第一個元素。IE7就可以支持

00002. X:last-child匹配父元素中最后一個X元素

00003. X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開始

00004. X:only-child這個偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。

00005. X:nth-last-child(n)從最后一個開始算索引。

00006. X:first-of-type匹配同級兄弟元素中的第一個X元素 ?

00007. X:last-of-type匹配同級兄弟元素中的最后一個X元素 ?

00008. X:nth-of-type(n)匹配同類型中的第n個同級兄弟元素X ?

00009. X:only-of-type匹配屬于同類型中唯一兄弟元素的X ?

00010. X:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素X

**:root**匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTML

**X:empty**匹配沒有任何子元素（包括包含文本）的元素X

· 目標偽類

· 目標偽類選擇器 E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向

· UI 元素狀態偽類選擇器

00001. E:enabled 匹配所有用戶界面（form表單）中處于可用狀態的E元素

00002. E:disabled 匹配所有用戶界面（form表單）中處于不可用狀態的E元素

00003. E:checked 匹配所有用戶界面（form表單）中處于選中狀態的元素E

00004. E::selection 匹配E元素中被用戶選中或處于高亮狀態的部分

· 動態偽類選擇器

00001. E:link 鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上

00002. E:visited 鏈接偽類選擇器 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上

00003. E:active 用戶行為選擇器 選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上

00004. E:hover 用戶行為選擇器 選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover

00005. E:focus 用戶行為選擇器 選擇匹配的E元素，而且匹配元素獲取焦點

· 層級選擇器

00001. E>F 子選擇器 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素

00002. E+F 相鄰兄弟選擇器 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面

00003. E~F 通用選擇器 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 CSS3

07 CSS復合選擇器

1 交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special

記憶技巧：

交集選擇器是并且的意思。即……又……的意思

比如：p.one選擇的是：類名為one的段落標簽。

用的相對來說比較少，不太建議使用。

2 并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器i選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

記憶技巧:

并集選擇器和的意思，就是說，只要逗號隔開的，所有選擇器都會執行后面樣式。

比如.one,p,#test{color；#F00;}表示.one和p和#test這三個選擇器都會執行顏色為紅色。通常用于集體聲明。

3 后代選擇器

后代選擇器又稱為包含選擇器，用來選元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

子孫后代都可以這么選擇。或者說，它能選擇任何包含在內的標簽。

4 子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。

白話：這里的子指的是親兒子不包含孫子重孫子之類。

比如：.demo>h3{color:red;}說明h3一定是demo的親兒子。demo元素包含h3

5 課堂練習-測試選擇器

在不修改以上代碼的前提下，完成以下任務：

1.鏈接登錄的顏色為紅色同時主導航欄里面的所有的鏈接改為藍色（簡單）

2.主導航欄和側導航欄里面文字都是14像素并且是微軟雅黑。（中等）

3.主導航欄里面的一級菜單鏈接文字顏色為綠色。（難）

6 屬性選擇器（一）

7 屬性選擇器（二）

8 偽元素選擇器（一）

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

E::first-line文本第一行；

E::selection可改變選中文本的樣式；

偽元素用雙冒號來開始，跟之前學的來對比下：

.demo 類選擇器，一個點

:first-child 偽類選擇器，兩個點

::first-letter 偽元素選擇器，四個點

9 偽元素選擇器（二）

E::before和E::after

在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合 content屬性使用。

E:after、E:before在舊版本里是偽元素，CSS3的規范里”:”用來表示偽類，”::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E:after、E:before，這樣做的目的是用來做兼容處理。

E:after、E:before后面的練習中會反復用到，目前只需要有個大致了解

“："與"∷"區別在于區分偽類和偽元素

效果是：俺今年18歲

before和 after在盒子div的內部前面插入或者是內部后面插入

10 CSS書寫規范

開始就形成良好的書寫規范，是你專業化的開始。

空格規范

【強制】選擇器與 { 之間必須包含空格。

示例：.selector { }

【強制】屬性名與之后的：之間不允許包含空格

：與屬性值之間必須包含空格

示例：font-size：12px；

選擇器規范

【強制】當一個rule包含多個 selector時，每個選擇器聲明必須獨占一行。

示例：

.post,

.page,

.comment {

line-height: 1.5;

}

【建議】選擇器的嵌套層級應不大于3級，位置靠后的限定條件應盡可能精確。

示例：

.comment .avatar {}

【強制】屬性定義必須另起一行。

示例：

.selector {

margin: 0;

padding: 0;

}?

【強制】屬性定義后必須以分結尾。如上

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《08 CSS背景及應用》小伙伴們不要錯過喲！