CSS笔记（2）

Emmet语法

它使用缩写，来提高html/css的编写速度。

快速生成HTML结构语法

1.生成标签，输入标签名，按Tab。
2.生成多个标签，例如div*4 Tab
3.父子关系，ul>li Tab
4.并列关系 div+p Tab
5.如果生成带有类名或者id名的，直接写.demo或#two Tab
6.如果生成的div类名是有顺序的，可以用自增符号$

.demo$*5 再按下tab键

    <div class="demo1"></div>
	<div class="demo2"></div>
	<div class="demo3"></div>
	<div class="demo4"></div>
	<div class="demo5"></div>

7.我们想生成的标签里面默认显示几个文字
div{显示的文字}*4

    <div>显示的文字</div>
	<div>显示的文字</div>
	<div>显示的文字</div>
	<div>显示的文字</div>

div{$}*5

    <div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>

快速生成CSS样式

略

CSS复合选择器

基础选择器通过不同方式组组成的。

后代选择器

把ol里的li选出来

ol li {
color: pink;
}

子选择器

选择最近一级子元素

div>p {
color: pink; 
}

选择div里面所有最近一级的p元素。

并集选择器

中间逗号隔开，最后一组不需要加逗号。

div,
p {
color: pink;
}

<div>熊大</div>
<p>熊二</p>

伪类选择器

用冒号来表示。
用于给链接添加特殊效果，或选择第一个或第n个元素。
a:link 未访问过的链接
a:visited 访问过的链接
a:hover 鼠标放上去的链接
a:active 选择活动链接（鼠标正在按下还没有弹起时）

a:link {
color: pink;
}

注意事项：
1.按照LVHA的顺序进行书写link,visited,hover,active
2.因为a链接在浏览器中有默认样式，所以我们在实际开发中都需要给链接单独制定样式。

focus伪类选择器

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

input:focus{
background-color: pink;
}

105