CSS學習筆記——Emmet語法，複合選擇器
Emmet語法
快速生成html結構
1.生成標籤直接輸入標籤名按tab鍵即可比如div然後tab鍵，就可以生成<div></div>
2.如果想要生成多個相同標籤加上*就可以了比如 div*3就可以快速生成3個div
3.如果有父子級關係的標籤，可以用>比如ul>li就可以了
4.如果有兄弟關係的標籤，用+就可以了比如div+p
5.如果生成帶有類名或者id名字的，直接寫demo或者#two或p.one就可以了
6.如果生成的div類名是有順序的，可以用自增符號$，例demo$*5
7.如果想要在生成的標籤內部寫內容可以用{}表示，例div{$}*5生成5個有序的div。
快速生成CSS樣式
w200可以生成width: 200px;
lh26可以生成line-height: 26px;
複合選擇器
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的
常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、偽類選擇器等等
後代選擇器
語法
元素1 元素2 { 樣式宣告 }
選擇元素1裡面的所有元素2（後代元素）。
元素2可以是兒子，也可以是孫子等，只要是元素1的後代即可。
元素1和元素2可以是任意基礎選擇器。
案例
/* 把ol裡面的li改為pink */ ol li { color: pink; }
子元素選擇器
子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素。
語法：
元素1>元素2 { 樣式宣告 }
並集選擇器（重要）
並集選擇器可以選擇多組標籤同時為他們定義相同的樣式。通常用於集體宣告。
並集選擇器是各選擇器通過英文逗號（，）連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。
語法：
元素1,
元素2 { 樣式宣告 }
上述語法表示選擇元素1和元素2。
例如：
ul,
div { 樣式宣告 } /* 選擇ul和div標籤元素 */
元素1和元素2中間用逗號隔開。
逗號可以理解為和的意思。
並集選擇器通常用幹集體宣告。
偽類選擇器
偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或選擇第1個，第n個元素。
偽類選擇器書寫最大的特點是用冒號(:)表示,比如:hover、:first-child。
因為偽類選擇器很多，比如有連結偽類、結構偽類等，所以這裡先給大家講解常用的連結偽類選擇器。
a:link /* 選擇所有未被訪問的連結 */
a:visited /* 選擇所有已被訪問的連結 */
a:hover /* 選擇滑鼠指標位於其上的連結 */
a:active /* 選擇活動連結（滑鼠按下未彈起的連結） */
連結偽類選擇器注意事項
-
為了確保生效，請按照LVHA的循順序宣告
:link :visited :hover :active。 -
記憶法：love hate或者v包包hao。
-
因為a連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。
focus 偽類選擇器
:focus偽類選擇器用於選取獲得焦點的表單元素。
焦點就是游標,一般情兄<input>類表單元素才能獲取,因此這個選擇器也主要針對於表單元素來說。
input:focus {
background-color: yellow;
}