前端筆記之HTML5&CSS3（中）選擇器&僞類僞元素&CSS3效果&漸變背景&過渡
1、CSS3選擇器
CSS3是CSS的第三代版本，新增了不少功能，例如：強大的選擇器、盒模型、圓角、漸變、動畫、2D/3D轉換、文字特效等。css
CSS3和HTML5沒有任何關係！HTML5骨架中，能夠用CSS2.1也能夠用CSS3。XHTML骨架中能夠用CSS3的樣式。html
在學習CSS以前都是學習選擇器，在CSS2中有class、id、標籤選擇器等。前端
CSS3賦予了強大的選擇器。web
CSS3沒有顛覆傳統CSS的寫法，依然是：瀏覽器
| 選擇器{函數 k:v;工具 k:v;性能 }學習 |
CSS有一個特色，碰見本身不認識的選擇器、屬性，會靜默不報錯。字體
)(*&^){ $%^&*():)*^%$; } div{ width: 100px; fhjkdsahfkjasf:99834y912y492; height: 100px; !@#$%^&*:$%^&*(); background-color: orange; }
1.1屬性選擇器
屬性選擇器IE7開始兼容。
CSS3中[]能夠選擇任意屬性，如下任意屬性選擇器將以自定義屬性舉例：
| 選擇器 |
版本 |
說明 |
| [data-info] |
CSS2 |
選中具備data-info屬性的標籤 |
| [data-info=’val’] |
CSS2 |
選中具備data-info屬性，值等於val的標籤 |
| [data-info^=’val’] |
CSS3 |
選中具備data-info屬性，值以val開頭的標籤 |
| [data-info$=’val’] |
CSS3 |
選中具備data-info屬性，值以val結尾的標籤 |
| [data-info*=’val’] |
CSS3 |
選中具備data-info屬性，值包含val的標籤 |
| [data-info|=en] |
CSS3 |
選擇具備data-info屬性，值以 "en-" 開頭的元素 |
| [data-info~=hello] |
CSS3 |
選擇具備data-info屬性，值包含單詞 "hello" 的全部元素。 |
選擇有data-info屬性的div
| div[data-info]{} |
選擇有data-info屬性，值是1的div，徹底匹配：
| div[data-info = "1"]{} |
選擇有data-info屬性，以h開頭的div：
| div[data-info ^= "h"]{} |
選擇具備data-info屬性，值包含單詞 "haha" 的全部元素，空格隔開單詞
| div[data-info ~= "haha"]{} |
短橫開頭匹配，選擇具備data-info屬性，值以 "haha-" 開頭的元素
| div[data-info |= "haha"]{} |
選擇有data-info屬性，值包含「a」全部的元素
| div[data-info*="a"]{background: skyblue;} |
還能夠用[]繼續進行多項匹配
| [src="img/am.jpg"][alt="A夢"]{border-color:blue;} |
<div data-info="1"></div> <div data-info="2"></div> <div data-info="3"></div> <div data-info="h1"></div> <div data-info="h2"></div> <div data-info="h3"></div> <div data-info="a3"></div> <div></div> <div data-info="hahaxixi"></div> <div></div> <div data-info="haha"></div> <div data-info="haha xixi"></div> <div data-info="xixi haha memeda"></div> <div data-info="haha-memeda"></div> <div data-info="woaini haha-memeda"></div> <div></div>
1.2兒子序選擇器（結構僞類）
:first-child p:first-child 選擇其父元素中的第一個子元素 :last-child p:last-child 選擇其父元素中最後一個子元素 :first-of-type p:first-of-type 選擇其父元素中的首個<p>元素 :last-of-type p:last-of-type 選擇其父元素中的最後<p>元素 :only-of-type p:only-of-type 選擇其父元素中惟一的 <p>元素 :only-child p:only-child 選擇其父元素中的惟一子元素 :nth-child(n) p:nth-child(2) 選擇其父元素中的第二個子元素 :nth-last-child(n) p:nth-last-child(2) 同上，從最後一個子元素開始倒着計數。 :nth-of-type(n) p:nth-of-type(2) 選擇其父元素第二個 <p> 元素 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，可是從最後一個子元素開始計數。 :not(selector) :not(p) 排除選擇器，選擇非 <p> 元素的元素。
<div> <p></p> <p></p> <p></p> <p></p> </div> <div> <h3>h3</h3> <p></p> <p></p> <div> <p></p> <p></p> <p></p> </div> </div>
:first-child() 只有這個IE7兼容，其餘通通IE9開始兼容
1.3 nth-of-type和nth-child的參數
注意：nth-child和nth-of-type的參數是同樣的，用法也同樣，只不過有小小的區別，nth-of-type能判斷同類標籤。
| 選擇器 |
說明 |
| li:nth-of-type(length) |
參數length是具體的數字，從1開始 |
| li:nth-of-type(3n) |
倍數選擇器，參數n從0開始計算，匹配第3、6、9...全部3的倍數 |
| li:nth-of-type(3n+2) |
表示從第2個開始，隔2選1，匹配全部3的倍數 |
| li:nth-of-type(even) |
選中全部的偶數 |
| li:nth-of-type(odd) |
選中全部的奇數 |
2、僞類
CSS2.1中只能給標籤增長：a:link、a:hover、a:visited、a:active
2.1 :focus獲得焦點時
當一個表單元素有焦點，那麼就能被:focus僞類選中
| input:focus |
2.2 :empty空標籤
當一個標籤是徹底首尾相接，沒有任何空格、tab、換行、文字等，就是:empty
<div></div> <div> </div> <div> </div> <div>我</div>
2.3 :checked選中的
單選按鈕、複選框、若是被勾選、就能被：checked選中。
| input:checked{} |
| <input type="radio" > <input type="radio" > <input type="checkbox" > <input type="checkbox" > |
2.4 :enabled和:disabled
選中啓用或禁用的input元素，IE9開始兼容。
| input:enabled{} input:disabled{} |
| <input type="button" value="按鈕1" disabled> |
2.5 :target
:target選擇器用於選擇當前活動的目標元素。
p:target 選擇當前活動的 p 元素。
<p><a href="#news1">跳轉至內容 1</a></p> <p><a href="#news2">跳轉至內容 2</a></p> <p id="news1"><b>內容 1...</b></p> <p id="news2"><b>內容 2...</b></p>
3、僞元素
3.1僞元素
注意：a:hover這些都叫僞類，僞元素就是僞標籤，元素就是標籤，因此就是假的標籤。
:first-letter 選中某個元素中的文本首字母或第一個文字，IE9開始兼容 :first-line 選中某個元素中的第一行文字，IE9開始兼容 :before 選中某個元素內部的前面插入內容 :after 選中某個元素內部的後面插入內容 ::selection 選擇被用戶選取的文本，IE9開始兼容，Firefox要用::-moz-selection替代
注意：before和after必需要寫content:」」屬性，沒有內容也必須寫，並且生成的是行內元素。
3.2僞元素使用iconfont字體圖標
| 1、下載相應的字體圖標或字體庫（字體文件） 2、用CSS3的@font-face屬性將字體引入到當前頁面，同時定義字體名稱（默認名稱爲iconfont） 3、在CSS中選中當前元素使用font-family調用字體圖標，同時給content屬性添加編碼（編碼在iconfont.css文件中找） |
4、CSS3效果
4.1文本陰影（text-shadow）
| text-shadow:水平陰影 垂直陰影 模糊距離 陰影顏色; |
| text-shadow:none; 取消陰影 |
| text-shadow:-5px -5px 10px red,5px 5px 10px green,10px 10px 15px blue; |
注意：前面兩項必須寫，後面兩項可選，根據須要填寫，陰影的顏色默認是文字顏色。
| 1、陰影能夠有無數個，每一個陰影直接用「逗號」隔開 2、陰影不佔位置，相似於背景 |
4.2盒子陰影（box-shadow）
| box-shadow:水平陰影 垂直陰影 模糊距離 陰影大小 陰影顏色 內外/陰影; |
| box-shadow:0px 0px 20px 30px red,20px 25px 20px 30px green; |
| box-shadow:0px 0px 10px 30px red inset; 內陰影 |
| 1、陰影能夠有無數個，每一個陰影直接用「逗號」隔開 2、陰影不佔位置，相似於背景 3、將外陰影改爲內陰影，使用inset |
4.3圓角邊框
| border-radius:水平半徑/垂直半徑; 通常垂直半徑能夠省略，默認和水平半徑同樣。 |
| border-radius:左上 右上 右下 左下; |
4.4溢出隱藏
4.4.1 單行文本溢出隱藏*
p{ width: 300px; border: 1px solid red; /*如何超出隱藏*/ white-space: nowrap;/*文本不容許換行*/ text-overflow: ellipsis;/*文本超出省略號*/ overflow: hidden;/*段落內容超出隱藏*/ } <p>React和Vue的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單,已成爲 Web 開發的主流工具。</p>
4.4.2 多行文本溢出隱藏
div{ width: 400px; border: 1px solid red; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;/*第幾行開始隱藏*/ overflow: hidden; } <div>綽號「考拉」，北京航空航天大學軟件工程碩士，前端開發培訓名師。講課幽默、有激情，學生稱他的課堂是「小德雲社」，讓學生在歡聲笑語中把知識學會！考拉老師曾在國內某著名培訓機構擔任特級講師、課程研發專員，在北京、上海、廣州各地職教，學生衆多，優秀學員遍及阿里、騰訊、百度、京東、360、美團等公司。考拉老師的免費教學視頻流傳也很是廣，觀看總人數超十萬之多。 觀看邵山歡老師免費視頻>中國最先的web App、PhoneGap、Node.js研究者，爲北航諸多創業企業製做移動端項目。想感覺名師的魅力，快來愛前端學習吧！</div>
濾鏡
關於濾鏡咱們瞭解便可，不是必須須要記住的。
參考相關文章：https://blog.csdn.net/u010081689/article/details/48634509
5、漸變背景
在CSS3中，漸變分爲：線性漸變和徑向漸變
不再須要切1px而後平鋪背景作漸變了，IE9開始兼容
首先說一下，漸變屬性是background-image屬性，而不是background-color
- 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
- 徑向漸變（Radial Gradients）- 由它們的中心定義
5.1線性漸變
私有前綴：瀏覽器廠商把一些還處於實驗性質的CSS屬性，都加上了本身的前綴
| -webkit- Chrome和Safari瀏覽器 -moz- Firefox瀏覽器 -ms- IE瀏覽器 -o- 歐朋瀏覽器 |
語法：
| background:-webkit-linear-gradient(角度,顏色1,顏色2,顏色3) |
div:nth-of-type(2){ background:-webkit-linear-gradient(top,red,green,blue); background:-moz-linear-gradient(top,red,green,blue); background:-ms-linear-gradient(top,red,green,blue); background:-o-linear-gradient(top,red,green,blue); background:linear-gradient(top,red,green,blue); }
第一個參數，能夠寫deg爲單位的度數，一圈是360deg
方向有分歧：
方向有：
| left、right、top、bottom或角度（90deg），前面四個單詞能夠用to關鍵字指定方向，就不須要寫前綴。 |
能夠羅列多個顏色值，逗號隔開
| background:linear-gradient(red 0%,green 30%,pink 50%,skyblue 80%,blue 100%); |
5.2徑向漸變
| background:radial-gradient(red,green,blue); |
| background:radial-gradient(方向,顏色1,顏色2); |
方向有：
| left、right、top、bottom或center（默認），沒有deg角度，也不能用to關鍵字，必須寫前綴。 |
默認是圓的，能夠設置橢圓，ellipse表示橢圓，必須指定寬高
6、background系列屬性
6.1 background-origin屬性
背景起源屬性：
| background-origin:content-box; |
6.2 background-clip屬性
背景裁剪屬性：
| background-clip:content-box; |
| border-box：默認值，背景從border區域向外裁剪，超出部分將被裁剪 padding-box：背景從padding區域向外裁剪，超出padding部分將被裁剪 content-box：背景從content區域向外裁剪，超出內容部分將被裁剪 |
6.3 background-size屬性
能夠更改背景圖的尺寸了，IE9開始兼容。
| background-size:100px 200px; |
若是隻想設置一個值，另一個值自動按比例計算，那麼就寫auto：
| background-size: 200px auto; |
| background-size: auto 200px; |
backgrond-size能夠用cover來當作值，表示圖片不變形，儘量多的呈遞圖片。根據圖片的寬高比不一樣，和盒子的寬高比不一樣，有兩種區別。cover可能不能完整呈遞圖片：
值也能夠是contain，表示圖片不會變形，必定能呈遞完整圖片：
background-size用於精靈的時候，比較複雜，background-size是精靈圖總體的尺寸。
6.4多背景
一個盒子能夠同時攜帶多個背景了，用逗號隔開。IE9兼容。
可是，同一個盒子只能攜帶一個背景色，能夠攜帶多個背景圖。
background: url(images/0.png) repeat-y, url(images/shishi.jpg) no-repeat , url(images/0.jpg);
按照順序，前面沒有佔滿的空間，就能夠給後面的圖片使用。
background-position、background-size等等屬性都能用逗號隔開數值了，表示對不一樣的圖片來設置值。
| background-size: auto auto,600px 100px,auto auto; |
7、CSS3過渡
CSS3愈來愈多屬性支持現代瀏覽器，可使用CSS3替代JavaScript實現動畫效果。
過渡：就是從一種狀態慢慢的變化到另外一種狀態的過程。
好比：從黑到白，中間會有一個過渡的灰色。
transition屬性，就是過渡，讓某一個元素從CSS狀態A變爲CSS狀態B的時候不是幹嘣，而是有動畫。
作動畫，不須要setInterval，可使用CSS3，transition屬性使用的是瀏覽器內核中的C++代碼實現的，效率比setInterval高的多，動畫平滑程度、細膩程度都要高。
7.1 transition過渡屬性基本語法
| transition:屬性名稱 時間 運動方式 什麼時候開始; |
| transition:all 2s linear 1s; |
| transition:width 1s,height 2s; 多個屬性作過渡用逗號隔開。 |
第一個參數：就是想讓什麼CSS屬性參與過渡，若是想讓全部屬性都參與，寫all
第二個參數：就是過渡動畫的時間，s表示秒，不能不寫單位
第三個參數：緩衝關鍵字，ease表示不勻速，勻速是linear
第四個參數：延遲時間，0s表示不延遲
注意事項：
一、前面兩項參數必須寫，後面兩項可選
二、誰要作過渡就給哪一個選擇器自己加，不建議給觸發條件加，由於觸發條件，離開的時候沒有過渡效果。
三、若是要見人Chrome低版本瀏覽器或其餘低版本瀏覽器，就要加前綴：好比：-webkit-transiton
7.2 什麼屬性能過渡
基本全部屬性都能過渡：
background-color、background-position、background-image、border-radius、border、padding、font-size等等。
不能過渡的：
漸變色、float
尤爲要注意的是，jQuery中的animate函數，不支持background-color、background-position。因此，若是想要製做背景顏色、背景定位的動畫，必須使用CSS3。
7.3 何時觸發過渡
任何對元素的CSS改變都能觸發過渡。
不要認爲只有:hover可以觸發過渡。任何形成元素的改變，都會引起過渡。
好比元素的類名改變，可以觸發過渡。
好比直接用JS來設置屬性，也可以觸發過渡。
transition就像護身符同樣，任何人膽敢改個人css樣式，必定是動畫實現的。而且動畫效率比setInterval還高。
用過渡來實現動畫，遲早有一天要替代setInterval()原理。
7.4運動方式
貝塞爾曲線生成：http://cubic-bezier.com
| transition:all 2s cubic-bezier(0.1, 3.65, 0.74, -0.12); |
也能夠從瀏覽器的CSS樣式中調貝塞爾曲線參數：
原文出處：https://www.cnblogs.com/rope/p/10658576.html
- 1. CSS3僞元素、僞類選擇器
- 2. Css3的一些概括 屬性選擇器 僞類 陰影 背景 漸變 過渡 2D效果
- 3. CSS3之選擇器與僞類、僞元素
- 4. 選擇器之僞類與僞元素選擇器
- 5. CSS中選擇器以及僞類和僞元素選擇器
- 6. WEB前端 -- CSS僞類、僞元素選擇器
- 7. CSS3學習筆記（八）——UI元素狀態僞類選擇器
- 8. css3 僞元素和僞類選擇器詳解
- 9. 圖解CSS3----6-僞元素選擇器
- 10. css3-僞元素與僞類
- 更多相關文章...
- • ionic 背景層 - ionic 教程
- • XQuery 選擇 和 過濾 - XQuery 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。