css組合選擇器專題及常見問題，MySQL全部學完要多久？
你指的學完是？學完常用的基礎知識嗎？
我感覺學完這些常用的基本知識半年之內學完，沒有任何問題！
但是，我想說，即使看似再簡單的 HTML 和 CSS ，其實也有很多隱藏的技巧，深入的知識等，學完基礎知識是一回事，學會是另外一回事！
就像你說的上面的每一個開發語言和技術單獨拿出來都需要很長時間才能精通！
學完和學會是兩回事！
四路選擇器功能表？
四路選擇器簡介:要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。
HTML頁面中的元素就是通過CSS選擇器進行控制的。
1.1 類別選擇器
類選擇器根據類名來選擇
前面以”.”來標志，如：
.demoDiv{
color:#FF0000;
}
在HTML中，元素可以定義一個class的屬性。
如：
<div class="demoDiv">
這個區域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p class="demoDiv">
這個段落字體顏色為紅色
</p>
最后，用瀏覽器瀏覽，我們可以發現所有class為demoDiv的元素都應用了這個樣式。包括了頁面中的div元素和p元素。
上例我們給兩個元素都定義了class，但如果有很多個元素都會應用這個元素，那得一個個的定義元素，就會造成頁面重復的代碼太多，這種現象稱為“多類癥”。
我們可以改成這樣來定義。
<div class="demoDiv">
<div>
這個區域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p>
這個段落字體顏色為紅色
</p>
</div>
這樣，我們就只是定義了一個類，同時把樣式應用到了所有的元素當中。
1.2 標簽選擇器
一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽
采用相應的CSS樣式，(在大環境中你可能出于不同的位置，但是不管怎么樣，你總
是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪里
都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：
p{
font-size:12px;
background:#900;
color:090;
}
復制代碼則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)
，這在后期維護中，如果想改變整個網站中p標簽背景的顏色，只需要修改
background屬性就可以了，就這么容易！
1.3 ID選擇器
根據元素ID來選擇元素，具有唯一性。
前面以”#”號來標志，在樣式里面可以這樣定義：
#demoDiv{
color:#FF0000;
}
這里代表id為demoDiv的元素的設置它的字體顏色為紅色。
我們在頁面上定義一個元素把它的ID定義為demoDiv，如：
<div id="demoDiv">
這個區域字體顏色為紅色
</div>
用瀏覽器瀏覽，我們可以看到因為區域內的顏色變成了紅色
再定義一個區域
<div>
這個區域沒有定義顏色
</div>
用瀏覽器瀏覽，與預期的一樣，區域沒有應用樣式，所以區域中的字體顏色還是默認的顏色黑色。
1.4 后代選擇器
后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個常用選擇器，中間加一個空格表示。其中前面的常用選擇器選擇父元素，后面的常用選擇器選擇子元素，樣式最終會應用于子元素中。
如：
<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">藍色
<b>也是藍色</b>
</label>
</p>
這里我們定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍色。
后代選擇器是一種很有用的選擇器，使用后代選擇器可以更加精確的定位元素。
怎樣區分后代選擇器和子代選擇器？
1.第一從符號上來區分后代選擇器：是用空格來分隔開來 例如<h1>一個<span>人</span>的戰爭</h1> 就是h1 span{}子代選擇器：用特殊符號> 例如 h1>span{}
2.第二從用法上區分后代選擇器html部分：<ul class="study"> <li>物理 <ul> <li>力學</li> <li>聲學</li> <li>電磁學</li> </ul> </li> <li>數學 <ul> <li>微積分</li> <li>概率論</li> <li>博弈論</li> </ul> </li> </ul> css部分//使用子代選擇器的效果.study >li{ border:1px solid red;/*只給物理和數學加一個紅色方框*/}//使用后代選擇器的效果.study li{ border:1px solid red;/*給物理 力學 聲學 電磁學 和數學 微積分 概率論博弈論都加一個紅色方框*/}這說明子代是他是單傳只給物理和數學就斷子絕孫，后代是一代傳一代。
子代選擇器時效果圖：
后代選擇器時效果圖：
是不是可以放棄前端這個方向了？
10年老程序員，來說說看法！
HTML，CSS，JavaScript其實是非常高明的設計！
HTML可以修建未裝修的毛坯房，CSS負責毛坯房的裝修，JavaScript可以實現各種家用電器的功能！三者結合，才能打造出宜居的好房子！
這是我從事了近10年軟件開發總結出來的結論。
這些年軟件開發過程中，接觸過非常多的前端框架，從最早的C++ Builder，到MFC，到Qt，再到Win Form，還接觸過WPF等等，一堆CS的界面框架。
剛開始也沒覺得啥，因為都是CS端界面框架，使用體驗沒差太多。
但是做界面多了，就開始接觸web頁面開發！剛開始只是了解，那時候還看不上web開發，覺得web頁面性能太弱?。。?/p>
后來慢慢做一些特效來玩耍，其中就有黑客帝國的代碼雨！有用控制臺實現的，有用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三劍客，永遠是開發頁面的首選！