CSS学习记录2——Emmet语法和复合选择器

Emmet语法

1.快速生成html标签

• 生成标签直接输入标签名然后按tab键或者回车键即可，比如 div 然后tab键，就可以生成
• 生成多个标签直接写 标签名数字 例如：div3
• 父子关系的标签使用>连接 比如 ul>li
• 兄弟关系的标签使用+连接 比如 div+p
• 生成类名的标签 直接写.demo,默认为div标签；其他标签需添加标签名 比如：p.demo
• 生成带有id的标签 直接写#demo,默认为div标签；其他标签需添加标签名 比如：p#demo
• 生成自增顺序的标签使用 $ 符号，例如p.demo$*5
• 若想生成标签里的内容可以使用{}将内容包含进去，例如div{$}*5

2.快速生成CSS样式

• 此语法较简单，即单词的简写
  例如：lh100+tab键即可生成line-height: 100px

CSS的复合选择器

1.后代选择器

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

ol li{
	color: red;
}

注意：这里的选择器可以为任意的基础选择器
比如

.nave li{
	color: red;
}

2.子选择器

• 子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

.nav>a{
	color: red;
}

3.并集选择器

• 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
• 并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

div,ul{
	color: red;
}

4.链接伪类选择器

语法	说明
a:link	未曾点击过的链接的样式
a:visited	点击过的链接的样式
a:hover	鼠标放置在链接上时的样式
a:active	鼠标点击时链接的样式

• 注意：为确保生效，声明顺序为link->visited->hover->active

5.focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素。
语法：

input focus{
	background: red; 
}