令人煩惱的css選擇器權值問題，是不是可以放棄前端這個方向了？
10年老程序員，來說說看法！
HTML，CSS，JavaScript其實是非常高明的設計！
HTML可以修建未裝修的毛坯房，CSS負責毛坯房的裝修，JavaScript可以實現各種家用電器的功能！三者結合，才能打造出宜居的好房子！
這是我從事了近10年軟件開發總結出來的結論。
這些年軟件開發過程中，接觸過非常多的前端框架，從最早的C++ Builder，到MFC，到Qt，再到Win Form，還接觸過WPF等等，一堆CS的界面框架。
剛開始也沒覺得啥，因為都是CS端界面框架，使用體驗沒差太多。
但是做界面多了，就開始接觸web頁面開發！剛開始只是了解，那時候還看不上web開發，覺得web頁面性能太弱！！！
后來慢慢做一些特效來玩耍，其中就有黑客帝國的代碼雨！有用控制臺實現的，有用MFC的，WPF的，當然也有web頁面版本的！
都測試下來，發現web版本的性能居然非常出色，輕松實現60幀！當然，比WPF可能差一點！
這激起了我對前端技術的興趣！經過了解，發現web渲染，早就支持GPU加速了，比MFC的GDI+不知道快多少！
再加上最近這些年WebGL技術快速發展，web端的三維渲染技術也飛速發展！除了一些特別前沿的渲染效果不及桌面端，web三維的渲染性能與桌面端的差距也越來越小！
JavaScript的執行效率問題，也有望通過wasm技術解決！
此外web技術還有最大的先天優勢，就是跨平臺特性！目前流行的多端前端開發框架，有很多是基于web技術的。
于是我也入坑web技術了。
當我寫完自己的第一個頁面的時候，我驚到了！使用web技術，幾乎什么樣的界面，都可以很輕松的搭建出來！而且我沒有使用第三方框架，純三劍客完成。
和一眾CS端的界面框架相比，HTML，CSS，JavaScript三者結合，開發頁面實在是太爽了。
比如說：
你可以隨意控制界面的某一個角，用多大半徑的圓角渲染，而且這只需要兩句簡單的CSS樣式即可實現，不需要重寫任何繪制函數！
再比如說：
好看的樣式，可以通過給標簽加一個id，或者一個class，輕松實現代碼復用！這比任何的派生或者聚合都要輕松靈活得多。
HTML，負責頁面的骨架！就算網速慢，頁面的基本功能可以使用。
CSS，負責美化頁面，實現各種狂拽酷炫的效果！還不會對站點的核心邏輯造成任何干擾。
JavaScript，負責頁面的基本邏輯！寫好代碼之后，不需要編譯，直接可以執行查看效果！最初JavaScript只是用來實現前端簡單的邏輯，但是發展到如今這個程度，你甚至可以用JavaScript實現一個web端的三維引擎，比如three.js，比如cesium！
如果你見的前端開發方式多了，相信你會和我有同樣的感受！web三劍客，永遠是開發頁面的首選！
css怎么增加邊框沒有間隙？
css增加邊框沒有間隙的方式如下
方法一：通用兄弟選擇器( ~ )
Document
ul {margin: 0; padding: 0;}
li { list-style: none; height: 50px; line-height: 50px;}
li~li {border-top: 1px solid #000;}
1
2
3
4
5
6
li~li {...} 中的 ~ 符號稱為通用兄弟選擇器，匹配P元素之后的P元素，所以第一個P元素不會匹配到。
方法二：偽類選擇器( :first-of-type / :last-of-type )
Document
ul {margin: 0; padding: 0;}
li { border-top: 1px solid #000; list-style: none; height: 50px; line-height: 50px;}
li:first-of-type {border-top: none;}
1
2
3
4
5
6
首先將所有 li 設置 border-top，然后用 :first-of-type 查找到第一個 li ，取消border-top。
CSS的基本特征？
總體來說，CSS具有以下特點：
1.豐富的樣式定義
CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；允許為任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。
2.易于使用和修改
CSS可以將樣式定義在HTML元素的style屬性中，也可以將其定義在HTML文檔的header部分，也可以將樣式聲明在一個專門的CSS文件中，以供HTML頁面引用。總之，CSS樣式表可以將所有的樣式聲明統一存放，進行統一管理。
另外，可以將相同樣式的元素進行歸類，使用同一個樣式進行定義，也可以將某個樣式應用到所有同名的HTML標簽中，也可以將一個CSS樣式指定到某個頁面元素中。如果要修改樣式，我們只需要在樣式列表中找到相應的樣式聲明進行修改。
3.多頁面應用
CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。
4.層疊
簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最后面設置的樣式效果。
5.頁面壓縮
在使用HTML定義頁面效果的網站中，往往需要大量或重復的表格和font元素形成各種規格的文字樣式，這樣做的后果就是會產生大量的HTML標簽，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。
css規則定義有哪些選擇符？
css選擇符（選擇器）有以下這些：
1、通配選擇符（ * ）：匹配任意元素。
2、id選擇符（ # myid）：匹配 ID 等于“myid”的任意元素 。
3、類選擇符（.myclassname）：匹配 class 等于“myclassname”的任意元素.
4、標簽選擇符（div, h1, p）：選擇指定元素名稱的所有元素。
5、相鄰選擇符（E + F）：用于選擇（不是內部）指定的第一個元素之后緊跟的元素。
6、子選擇符（E > F）：用于選取帶有特定父元素的元素，例ul > li，選擇所有父級是 <ul> 元素的每個 <li> 元素。（學習視頻分享：css視頻教程）
7、后代選擇符（E F）：用于選取元素內部的元素。
8、偽類和偽元素選擇符：用于向某些選擇器添加特殊的效果。