css3****
E[attr]:指定css样式对具有attr属性的e元素（e相当于类名，[相当于color]例：.c{color:#f0f
}）
E[attr=value]：指定该css样式对所有包含attr属性，且attr属性为value的E元素
.a[c]{color:#000;}
E[attr~=value]：指定该css样式所有包含attr属性，且attr属性的值为空格隔开的系列值，其中某个值代表valueE的元素起作用 .b[class~=b]{color:#123}
E[attr|= value]：指定改样式对所有包含attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值value的tag元素起作用 .d[class|=c]{class:#222} (字符串是**-**)
E[^=value]:指定改样式对所有包含attr属性，且attr属性的值为以value开头的字符串E元素起作用
E[$=value]:指定改样式对所有包含attr属性 ,且attr属性的值为以value结束的字符串E元素作用
E[*=value]：指定改样式对所有包含attr属性 ，且attr属性的值为包含value的字符串E元素起作用
2022-2-24****
Selector:root匹配文档的根元素（html 如果pc端写在html 移动端写在root中)
1. selector：first-child：匹配符合selector选择器，而且必须是其父元素的第一个节点。
2. Selector：last-child：匹配符合selector选择器，而且必须是其父元素的最后一个节点。
3. Selector：nth-child（）：匹配符合selector选择器，而且必须是其父元素的第n个节点。
4. Selector：only-child：匹配符合selector选择器，而且必须是其父元素的唯一一个节点。
5. Selector：nth-last-child（）：匹配符合selector选择器，而且必须是其父元素的倒数第n个子节点
没有type的是指div中第几个给予命名****
6. Selector：first-of-type：匹配符合selector选择器，而且与它同类型、同级别的兄弟元素中的第一个元素（一样的）
7. Selector：last-of-type：匹配符合selector选择器，而且与它同类型、同级别的兄弟元素中的最后一个元素
8. Selector：nth-of-type（n）：匹配符合selector选择器，而且与它同类型、同级别的兄弟元素中的第n个元素
9. Selector：nth-last-of-type:（n）匹配符合selector选择器，且与它同类型、同级别的兄弟元素中的倒数第n个元素
10. Selector：only-of-type：匹配符合selector选择器，而且与它同类型、同级别的兄弟元素中的唯一一个元素
11. Selector：empty：匹配符合selector选择器，而且其没有任何子元素（包括文本节点）
Ui元素状态伪类****
1. Selector：link：匹配符合selector选择器，且被访问前的元素（通常只能是超链接）
2. Selector：visited：匹配符合selector选择器，且已被访问过的元素（只能是超链接）
3. Selector：active：匹配符合selector选择器，且处于被用户激活的元素（在鼠标点击与释放之间的事件）状态的元素
4. Selector：hover：匹配符合selector选择器，且处于鼠标悬停状态的元素
5. Selector：focus：匹配符合selector选择器，且已得到的焦点元素
6. Selector：~~enabled~~~~：~~匹配符合selector选择器，且当前处于可用状态的元素
7. Selector：disabled：匹配符合selector选择器，且处于当前不可用状态的元素
8. Selector：checked：匹配符合selector选择器，且当前处于选中状态的元素
9. Selector：default：匹配符合selector选择器，且页面打开时处于选中状态（即使当前没有被选中亦可）的元素
10. Selector：read-only：匹配符合selector选择器，且处于只读状态的元素
11. Selector：read-write：匹配符合selector选择器，处于读写状态的元素
12. Selector：selector：匹配符合selector选择器的元素中当前被选中的内容
input:focus{
background-color: #333;
color: aquamarine;
}
input:disabled{
opacity: 0.4;
}
input:checked{<br>
width: 20px;
height: 20px;
}
input:read-only
border: solid 4px #f00;
用户名:
密码:
性别:男女
<div class="p">
<p class="a">123</p>
<p class="a c">456</p>
<p class="b d">789</p>
<p class="border-1" id="f">963</p>
</div>
.p{
background-color: rgb(66, 238, 14);
}
.b[class~=b]{
background-color: crimson;
}
p[id]{
background-color: aqua;
}
p[class|=border]{
background-color: chocolate;
}
<style>
.one {
background-color: antiquewhite;
}
.two {
background-color: aquamarine;
}
p:first-child {
background-color: rgb(147, 165, 42);
}
p:first-of-type {
border: solid 2px #222;
}
p:last-child {
border: dotted 2px #f00;
}
p:last-of-type {
border: groove 2px #0f0;
}
h2:nth-child(1) {
background-color: blue;
}
h2:nth-of-type(1) {
background-color: #f00;
}
p:only-child {
background-color: #0f0;
}
p:only-of-type {
border-bottom: dotted 3px #222;
}
</style>
<style>
.one {
background-color: antiquewhite;
}
.two {
background-color: aquamarine;
}
p:first-child {
background-color: rgb(147, 165, 42);
}
p:first-of-type {
border: solid 2px #222;
}
p:last-child {
border: dotted 2px #f00;
}
p:last-of-type {
border: groove 2px #0f0;
}
h2:nth-child(1) {
background-color: blue;
}
h2:nth-of-type(1) {
background-color: #f00;
}
p:only-child {
background-color: #0f0;
}
p:only-of-type {
border-bottom: dotted 3px #222;
}
</style>
伪元素****
1. 伪元素是创造关于文档语言能够指定的文档树之外的抽象
2. 伪元素选择器只能针对css中已有的伪元素起作用
3. first-letter：该选择器对应的css样式对指定对象内的第一个字符串起作用
4. First-line：该选择器对应css样式指定对象内的第一行内容起作用
5. Before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容
6. ：after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾端添加内容
7. 例如：css03.html、css04.html
