HTML中快捷输入方式

快捷输入方式：

1. lorem+tab键：出现自带的文字
2. 格式：lorem+n(要出现的单词个数)

3. 格式：p>lorem10+tab
   输出10个单词连带p一起输出

4. （元素）p+tab：自动补充结束标签

5. 注释：ctrl+?
   注：鼠标在的哪行一起删除

6. ctrl+d：复制当前行
7. ctrl+f：查找
8. ctrl+r替换
9. 多行输入：
10. 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标签
^=