HTML中快捷输入方式
快捷输入方式：
- lorem+tab键：出现自带的文字
- 格式：lorem+n(要出现的单词个数)
-
格式：p>lorem10+tab
输出10个单词连带p一起输出 - （元素）p+tab：自动补充结束标签
-
注释：ctrl+?
注：鼠标在的哪行一起删除 - ctrl+d：复制当前行
- ctrl+f：查找
- ctrl+r替换
- 多行输入：
- div>p>span{xuanzi$$}*5 $:代表数字，两个就是01,02,03.04,05
Html中选择器：
一、基础选择器
1、通配符选择器：*{} 改变了全部样式
2、元素选择器：元素{}
3、组合选择器/并集选择器：元素1，元素2，类，伪类，元素.类{}
4、类选择器
html:<h2 class="F46"></h2>
css: .F46{}
特点
1、在css中必须要以点号（英文）开始
2、在html中包含字母、数字、连字符（-）、下划线（__）
3、在html点号后面必须是字母开始的
4、在html中区分大小写
5、在html中一个类选择器可以应用到多个标签
示例：
html:<h2 class="F46 F45"></h2>
css: .F45{}
这种情况针对精确设置，例如：在div>ul>li中
5、ID选择器
html:<h2 id="F46 "></h2>
css: #F46{}
二、层次选择器
1、后代选择器
格式：祖先 后代选择器{}
html:
<div> <p> <em></em> </p> </div>
css:
div p em{}
2、子级选择器
格式：父级元素>子级元素{}
html: <div> <p> <em></em> </p> </div>
css:
div> p> em{}
3、兄弟选择器
格式：兄弟元素A+兄弟元素B{}
选择A元素后的B元素，并且AB必须是相邻的，即AB之间不许有其他元素
html:
<div> <p> <em></em> <i></i> </p> </div>
css:
em+i{}
4、通用选择器
格式：兄弟元素A~兄弟元素B{}
选择匹配的B元素，即A元素后面的所有B元素
html:
<div> <p> <em></em> <span></span> <i></i> </p> </div>
css:
em~i{}
三、伪类选择器
1、动态伪类选择器
（1）、动态
元素：link
元素：visited
（2）、静态
元素：hover
元素：active
元素：focus
2、触发焦点（tab）键时的样式
注：a标签用的最多
获取一张图片在什么样的位置显示
4、结构类选择器
格式（针对一个div下有多个相同元素）
要修改的元素：first-child{}(改变第一个元素)
要修改的元素：last-child{}(改变最后一个元素)
要修改的元素：nth-child(n){}(n要改变的那个元素在第几个)
要修改的元素：nth-last-child(n){}(修改倒数第几个元素)
要修改的元素：nth-child(odd){}(修改元素位置在奇数位时：
odd代表奇数，或者写成2n+1y
要修改的元素：nth-child(even){}(修改元素位置在奇数位时：
even代表偶数，或者写成2n
div>p(元素1)：nth-of-type(n){}(修改在div中类型为p(元素1)中第二个p的样式
空元素：empty{}(改变元素为空（没有内容）的元素样式)
只有一个元素：only-child(在div（区块也可以其他元素）中只有一个元素且仅有一个才能改变样式
5、否定伪类选择器
格式：元素：not(:nth-child(4)){}除了第四个不改变样式其他都改变，{}写相应的样式
6、伪元素选择器
对一段文字进行操作
selection的规则
只能有color,background-color(background)两个属性
格式
::selection{
color:red;
background-color:bule;
}
::first-letter{}选中第一个字母进行样式的改变
::first-line{}选中第一个行进行样式的改变
在标签前/后添加内容（尽量选择有自动换行的标签）
i::before{content:"您好"}
在i标签前加上”您好“，显示在网页中
em::after{content:"王先生"}
在em标签后加上”王先生“，显示在网页中
四、属性选择器（通常用到input）中
html
<input type="text"/>
css
input[type="text"]{color:red}
html；<input type="number-rfdbx"/>
css:input[type竖线1="number"]{color:red}
选中以”number-“开始的input标签
竖线=
html
<input type="number-rfdbx text"/>
css:input[type$="number"]{color:red}
选中以”text开始“的input标签
$=
html
<input type="number-rfdbx dgsb f46 dgd"/>
css:input[type*="number"]{color:red}
选中以”包含f46“的input标签
*=
html
<input type="number dgsb text gav "/>
css:input[type~="number"]{color:red}
选中以”包含text“的input标签，并且多个属性以空格隔开
~=
html
<input type="text-rfdbxvs gsvx"/>
css:input[type^="number"]{color:red}
选中以”text“开始,也可写成”te“的input标签
^=
