CSS 学习笔记（四）

Emmet 语法

快速生成 HTML 结构语法

1.生成标签 直接输入标签名 按 tab 键 比如输入 p 单击 tab 键 即可生成<p></p>

2.如果想要生成多个相同的标签 加上* 比如div*3 这样就可以生成 3 个 div 啦

3.如果有父子级（包含）关系的标签 可以用> 比如ul>li

4.如果是兄弟关系的标签，可以用+ 比如div+p

5.如果生成带有类名或者 id 名字的，直接写.demo 或者 #two tab 键就可以了

6.如果生成的 div 类名是有顺序的，可以用自增符号$,比如.demo$*5

快速生成 css 样式语法

想要输入宽，就输入 w，按 Tab 键即可自动补全 width，想要输入宽为 200，就输入 w200，按 Tab 键即可自动补全 width：200；高也同理。

CSS 的复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，复合选择器是由两个 或多个基础选择器，通过不同的方式组合而成的，他相对来说有什么优点呢？他九二一更准确、更高效的选择目标元素。

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器

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

元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2（后代元素）。

举个小小的例子吧：

ul li { 样式声明 }ul li a { 样式声明 }

上述是指选择 ul 里面所有的 li 标签元素，注意元素 1 和元素 2 中间用空格要隔开，元素 1 是父级，元素 2 是子级，最终选择的是元素 2，元素 1 和元素 2 可以是任何的基础选择器。

子选择器

子元素选择器只能选择作为某元素的最近一级子元素。

基本语法如下：

元素1 > 元素2 { 样式声明 }

举个小小的例子吧：

div > p{ 样式声明 } 

上述是指选择 div 里面的所有最近一级 p 标签元素 ，注意！！！只会选择最近一级的，元素 1 和元素 2 要用大于号隔开，元素 1 是父级，元素 2 是子级，最终选择的是元素 2。

并集选择器

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

并集选择器是各选择器通过英文逗号（,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

基本语法如下：

元素1，元素2 { 样式声明 }

上述语法表示同时选择元素 1 和元素 2。

举个小小的例子吧：

ul，div{ 样式声明 }

上述是指选择 ul 和 div 标签元素，其中元素 1 和元素 2 中间要用逗号隔开，逗号可以理解为和的意思。

伪类选择器

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

伪类选择器书写最大的特点是用冒号表示，例如：hover

伪类选择器分为两种，比如有链接伪类、结构伪类等。

链接伪类

一些常用的语法如下：

a:link  /*选择所有未被访问的链接*/a:visited  /*选择所有已被访问的链接*/a:hover  /*选择鼠标指针位于其上的链接*/a:active /*选择活动的链接（鼠标按下未弹起的链接*/