Emmet语法和CSS复合选择器

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。
1、快速生成HTML结构语法

2、快速生成CSS样式语法

3、快速格式化代码

CSS的复合选择器

复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。

• 复合选择器可以更准确、更高效的选择目标元素。
• 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器（重要）
又称为包含选择器，可以选择父元素里面子元素。当标签发生嵌套时，内层标签就是外层标签的后代。
语法：

• 后者是前者的后代元素。
• 两元素之间一定用空格隔开。
• 最终选择的是后者元素。
• 后者可以是儿子也可以是孙子，只要是前者的后代即可。
• 两元素可以是任意基础选择器。

子选择器（重要）
只能选择作为某元素的最近一级子元素。即选亲儿子元素。

• 两元素中间用大于号隔开
• 1是父级2是子级，最终选择的是2
• 必须是亲儿子，其他不行。

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

• 各选择器通过逗号连接而成
• 任何形式的选择器都可以作为并集选择器的一部分。
• 选择元素1和元素2
• 通常用于集体说明
• 最后一个选择器不加逗号

伪类选择器
向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
用冒号表示，比如：hover。

链接伪类选择器：

注意事项：
1、为了确保生效，按照LVHA的循顺序声明:link-:visited-:hover-:active。
2、记忆法 lovehate。
3、a链接在浏览器中有默认样式，所以实际工作中需要给链接单独指定样式。
实际开发中经常的写法：

focus伪类选择器
用于选取获得焦点的表单元素
焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器主要针对表单元素来说。

复合选择器总结