VScode&快捷使用的方式 以及css伪类选择器

vscode 快捷方式的使用

1. 创建好html文档以后，输入英文状态下的！可以直接生成HTML的基本骨架。
2. 文档输入代码格式不满意，可以直接摁alt+shift+f进行格式化文档。
3. 代码书写快捷方式：eg:想输入五个div ，div*5摁一下回车或者tab按钮可以直接生成以下代码

	// div*5  生成以下代码：
	<div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

4. 利用类选择器，id选择器快速生成代码：

	//  box*5生成以下代码：
	<div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
	
	// #box*5生成以下代码：
	<div id="box"></div>
    <div id="box"></div>
    <div id="box"></div>
    <div id="box"></div>
    <div id="box"></div>

5. 利用$的顺序特性输出不同类名：

	// .box$*5 生成的代码如下：
	<div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>

6. 利用{}输入文字的特性输出：

	// 	.box${我爱你}*5 输出以下代码：
	<div class="box1">我爱你</div>
    <div class="box2">我爱你</div>
    <div class="box3">我爱你</div>
    <div class="box4">我爱你</div>
    <div class="box5">我爱你</div>

7.快捷键alt可以同时选择多个光标，从而同时输入文字：

• 快捷键alt+shift可以连续选择多个光标：
  

css标签快速，伪类选择器：

1. p,a{样式} 为复合选择器；
   这类选择器的特点可以同时给多个标签设置同样的样式，避免代码冗余。
2. p+a{样式} 为兄弟选择器；
   这类选择器特点：在同一级同时选择这两个标签设置样式；避免代码冗余；
3. p>a{样式} 为亲儿子选择器；
   特点这类选择器仅仅会把p标签下一层的a选出来，但是不会把下下一层的a选出来。
4. p a{样式} 为子代选择器；
   特点会把所有的选择器p标签下的所有a标签都选择出来，不管是第几层。
5. a标签有四个伪类选择器：分别是lvha ,在开发中顺序不能颠倒，分别是link visit 就是 hover active
   分别的用法：
   link就是打开网页，鼠标没有任何操作时的样式；
   visit 是指你访问过的网页的样式，即：你点击以后的样式；
   hover 指的是：鼠标放上去时的样式变化。
   active 指的是鼠标点击不松开时的样式。
   总结：hover 是重点，不管是给超链接设置样式还是给以后的鼠标移动标签发生的变化都非常重要。

总结：开发的工具的快捷键能让我们开发效率大大提高，能掌握尽量全部运用到开发中，以上是我整理了一些我现阶段常用到的开发工具快捷键。 另外：下面是一些标签快速生成的快捷键以及一些基础的伪类选择器。

前端一只小兔子大三自学前端的一天