前端学习4-CSS基础2

Emmet语法：前身是Zen coding，使用缩写来提高html/css的编写速度。VSCode内部已集成该语法。

快速生成HTML结构语法：

a.输入标签名按Tab键可生成完整标签

b.生成多个相同标签，用*号以及Tab键，如div*3就可以快速生成3个div

c.父子关系的标签，用>号以及Tab键，如ul>li就能生成完整的ul和li标签

d.兄弟关系的标签，用+号以及Tab键，如div+p

e.带有类名或者id名的，直接写.类名、#id名以及Tab键，默认标签为div，如.demo生成类名为demo的div；ul>li#two生成id为two的li标签

f.如果生成的div类名是有顺序的，可以用自增符号$以及Tab键，如.demo$*5生成5个类名分别为demo1、demo2、demo3、demo4、demo5的div标签

g.想要生成的标签里面默认显示几个文字，div{文字}+Tab键

快速生成CSS样式：简写形式即可，如w200按Tab键->width:200px;，如lh26按Tab键->line-height:26px;

复合选择器：两个以上的基础选择器通过不同方式组合而成的

复合选择器分为后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器：又称为包含选择器，可以选择父元素里面的子元素。写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：元素1 元素2 { 样式声明 } 表示：选择元素1里面的所有元素2

注意：1）元素1和元素2之间用空格隔开的。2）元素1是父级，元素2是子集，最终选择的是元素2。3）元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。4）元素1和元素2可以是任意基础选择器

子选择器：只能选择最近一级子元素

语法：元素1>元素2 { 样式声明 } 表示：选择元素1里面的所有直接后代元素2

注意：1）元素1和元素2之间用大于号隔开的。2）元素1是父级，元素2是子集，最终选择的是元素2。3）元素2必须是亲儿子，也可以称为亲儿子选择器。

并集选择器：可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。