css偽類選擇器及偽元素選擇器，使用樣式表有什么好處？

使用樣式表有以下優點：

1.內容與表現分離

寫一個網頁就好比建房子，房子的結構通過磚塊、鋼筋、水泥搭建，后期通過瓷磚、地板等的裝飾，才能讓房子更加漂亮。

網頁通過HTML搭建整體結構，通過CSS修飾美化網頁。為了使得在搭建的過程中不受到美化網頁的影響，而是專注在結構上。并且在后期的維護上也更加方便。

2.網頁的表現統一，容易修改

分開之后，結構和樣式在不同的文件，互不影響，結構清晰，可讀性強，后期如果修改維護便于定位查找。

3.豐富的樣式，使得頁面布局更加靈活

首先樣式表中提供了強大的而且非常全面靈活的選擇器，可以供我們選取到網頁中的任何一個元素

從大的方面選擇器可以分為四大類：

1.基本選擇器

2.層次選擇器

3.結構偽類選擇器

4.屬性選擇器

如下圖我只是截取了屬性選擇器中幾種：

其次樣式表不僅提供了文本效果、背景和邊框還有2D/3D 轉換、動畫、多列布局、用戶界面等。

4.減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬

很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”

換句話說，在進行Web開發時，減少多余的標簽嵌套以及圖片的使用數量，意味著用戶要下載的內容將會更少，頁面加載也會更快。

另外，更少的圖片、腳本和Flash文件能夠減少用戶訪問Web站點時的HTTP請求數，這是提升頁面加載速度的最佳方法之一。

而使用CSS3制作圖形化網站無需任何圖片，極大地減少了HTTP的請求數量，并且提升了頁面的加載速度

基于以上幾點，使用樣式表是必須的！！

css3和css一樣嗎？

CSS3是CSS的子集，CSS3是最新的標準，提供了很多好用的新屬性，提升了網頁的表現性。

CSS3提供了更好用的選擇器

最新的CSS3中，對偽類、偽元素選擇器做了嚴格的規范。有了偽類后，不用在div標簽里面添加額外的元素完成一些DOM操作，可以通過::before,::after完成，代碼簡潔明了。對于鼠標的操作，也可以通過::hover等類似的操作完成。非常高效。還有::first–child等類似的選擇器去操作子元素。

CSS3使動畫效果越來越方便

css3里面通過animation來完成動畫，設置@keyframes即可，一些輕量級的動畫不必再通過js完成。

CSS3完成圓角、陰影美化更方便

以前的css完成類似的功能只能通過圖片做背景，現在只需要border-radius、boxshadow即可。非常高效簡潔。

CSS3提供了全新的盒模型

這個特性十分有用。原來的盒模型width=content.+border+padding。你規定了width.每次都要自己計算，現在有了boder-box不用這么麻煩了。

CSS3的flex布局是最強大的

IE已死，不需要再考慮它的兼容性！！！用flex布局，節省很多時間，節省的時間可以學很多東西，而不是浪費時間去適應落后的ie！！！

還有很多好用的css3特性，這個版本提供了巨大的生產力！！！很感謝它，期待下一個grid布局～

以上是我的看法～

學習web前端開發？

黑馬程序員web前端中級程序員學習路線圖，含配套視頻，前端工具，源碼等。

黑馬程序員學習路線圖及能掌握的能力（總，以下會分階段，加上配套學習視頻，小伙伴可繼續往下看！）

第一階段：HTML5+css

配套學習視頻：

前端小白零基礎入門HTML5+CSS3

第二階段：移動web網頁開發

配套學習視頻：

2018移動web進階教程

第三階段：JavaScript網頁編程

配套學習視頻：

前端與移動開發基礎入門到精通

javaScript零基礎通關必備教程

第四階段：Node.js與Ajax

配套學習視頻：

Nodejs教程精講

ajax從入門到精通

第五階段：vue.js項目實戰

配套學習視頻：

4小時+5個揀選案例讓你快速入門Vue.js

2018年Vue.js深入淺出教程

第六階段：微信小程序

配套學習視頻：

一天教你打造企業級微信小程序

微信小程序-個人語音接口功能

分分鐘快速入門小程序開發

零基礎玩轉微信小程序

2小時輕松實現人臉識別的小程序

第七階段：React.js項目實戰

配套學習視頻：

Reactjs入門教程

ReactJs精品教程

第八階段：框架階段與原理

第九階段：移動APP開發

第十階段：node.js進階

第十一階段：可視化游戲

第十二段階段：架構與運維

還有前端免費工具下載

另外，關注加轉發，然后私聊我發送：前端，就能獲得上面這些資源咯。

偽類選擇器的屬性？

偽類選擇器是通過冒號來定義，它定義了元素的狀態，如點擊按下，點擊完成等，通過偽類可以為元素的狀態修改樣式。

偽類選擇器的功能和一般的DOM中的元素樣式相似，但和一般的DOM中的元素樣式不一樣，它并不改變任何DOM內容。

只是插入了一些修飾類的元素，這些元素對于用戶來說是可見的，但是對于DOM來說不可見。

偽類選擇器的效果可以通過添加一個實際的類來達到。

偽類選擇器主要可以分為：動態偽類選擇器、UI元素狀態偽類選擇器、結構偽類選擇器、否定偽類選擇器。