css3子節點選擇器，css開發者工具？
CSS是Web開發的基礎之一，目前很多人正在學習和使用。今天，給大家介紹幾款CSS開發工具，讓你快速成為開發高手。
（一）在線學習CSS
1、Flexplorer
Flexbox能在屏幕上實時查看效果以及代碼。還可以編輯文本框，并查看文本框的響應式布局代碼。這種學習方式非常有趣，很適合新手。
2、Grid Garden
這個是通過互動游戲，來提示你編寫CSS代碼來種植胡蘿卜園。這也是一個有趣的學習方式，確保新手小白以引人入勝的方式學習CSS Grid的基礎知識。游戲包含28個級別，每個級別都需要你編寫CSS代碼段才能完成。
（二）學習制作工具
1、Patternizer和Patternify
通過這兩種工具，可以在用戶友好的界面中使用CSS創建出色的模式。而且它是直接用CSS編寫的，可以輕松地在網站上實現使用。
2、EnjoyCSS
這個工具非常簡單，是可以使用一些簡單的UI設計元素，然后通過這個工具將其轉換為CSS代碼。EnjoyCSS極大地改變了我的工作流程。由于易于使用，能使我們花費在創建復雜CSS樣式上的時間和精力減少，很容易就能得到復雜的CSS效果。
3、CSSmatic
這個多合一的工具，它可以幫你實現生成漸變、邊框半徑、噪點紋理、盒子陰影等效果，所有這些都包含一個簡單直觀的UI。作為前端開發人員，該工具是很必要的。
4、CSS Arrow please
此工具可幫助你創建和導出帶有箭頭的自定義的代碼提示框。盡管從頭開始編寫代碼聽起來很復雜，但該工具只需單擊幾下即可提供可用的代碼。獲得代碼后，就可以復制代碼并對其進行一些更改。
CSS選擇器first？
.content[data-role=page]:nth-child(2){} 使用:first-child偽類時一定要保證前面沒有兄弟節點，你前面有個content所以會失效
1
2
3
你把這里的span去掉和加上再看效果 就明白了css文件夾里放什么？
瀏覽器解析html文檔是自上而下的，如果將CSS放在底部，頁面可以逐步呈現，但在CSS下載并解析完畢后，已經呈現的文字和圖片就要需要根據新的樣式重繪，這是一種不好的用戶體驗。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css文件應該放在HTML頂部的head中。
why?
link標簽里面的href(HyperText reference)屬性表示超文本引用，當CSS使用href引用，瀏覽器會識別該文檔為CSS，并行下載，不會停止對當前文檔的加載，在加載html生成DOM tree的時候，就可以同時對DOM tree進行渲染，這樣可以防止閃跳，白屏或者布局混亂。
最理想的情況，我們希望瀏覽器逐漸的渲染下載好的CSS，將頁面逐漸的展現給用戶。但是瀏覽器為了避免樣式變化時重新渲染繪制頁面元素，會阻塞內容逐步呈現，瀏覽器等待所有樣式加載完成之后才一次性渲染呈現頁面。
CSS文件如果放置底部，瀏覽器阻止內容逐步呈現，瀏覽器在等待最后一個css文件下載完成的過程中，就出現了“白屏”(新打開連接時為白屏，爾后先出現文字，圖片，樣式最后出現)。這點非常嚴重，因為在網速非常慢的情況下，css下載時間比較長，這樣就給用戶帶來“白屏”的時間自然也就很長了，用戶體驗非常差。
CSS文件放在頂部一方面是因為放置順序決定了下載的優先級，更關鍵的是瀏覽器的渲染機制。
css在加載過程中不會影響到DOM樹的生成，但是會影響到Render樹的生成，進而影響到layout，所以一般來說，style的link標簽需要盡量放在head里面，因為在解析DOM樹的時候是自上而下的，而css樣式又是通過異步加載的，這樣的話，解析DOM樹下的body節點和加載css樣式能盡可能的并行，加快Render樹的生成的速度。
將CSS放在底部，頁面可以逐步呈現，但在CSS下載并解析完畢后，已經呈現的文字和圖片就要需要根據新的樣式重繪，這是一種不好的用戶體驗。
html5的CSS3選擇器中？
選擇父級下第一個元素和最后一個元素如：
aaaabbbbcccccdddd.list li:first-child{color:#f00;} //只有aaa變紅色.list li:last-child{font-weight:bold;} //只有dddd變粗體