1.用加号+连接的相邻选择符： 匹配的是紧随在E后的同级F元素
之前的文章最后一点有提到，
重点：在相邻紧挨着的兄弟的后者上添加样式
p1
样式：
p + div { color: red; }运行效果：与p紧挨着的div受影响
2.用~连接的兄弟选择符：匹配的是任何在E之后的同级F元素
p1
样式：
p ~ div { color: red; }运行效果：p后面的两个div都受影响，不用紧挨着
在之前的入门文章也提到过，写的是伪类选择器在a标签上的应用
伪类选择器还有其他用途：如设置第一个子元素，不能只选取某元素的部分内容，是一整个元素都被选中
:not(selector)
选择除了selector以外的元素
p1
p2
p3
p:not(.p1){
color: red;
}
运行效果：除了设置了class为p1的，其他的p标签都受影响
E:first-child
选择E的父类的第一个E子元素（第一个子元素且是E标签）
p1
- 1
- 2
- 3
- 4
- 5
运行结果：寻找所有的li，找到其父类，再找父类第一个子元素，且为li的，只有ul下的第一个li符合要求，最后一个子元素li:last-child同理，5会变成红色
li:first-child：
E:nth-child(n)
与上同理，选择E父类的第n个E子元素，如果其父类的第n个子元素不是E，就不选择（n从1开始算），E:nth-last-child(n)是从尾巴开始往前算，
- 1
- 2
- 3
- 4
- 5
运行结果：数字2为红色，
第一个li的父类是body，但body的第二个子元素是ul，不是<li>6</li>，不是li标签，所以没有产生作用
如果想缩小范围，可以与嵌套选择器结合使用
原本选中了两个li
li:nth-child(1) { color: red; }与嵌套选择器组合使用：
ul li:nth-child(1) { color: red; }运行效果：只有ul下的li会产生效果
如果希望第奇数个E子元素受影响，可以写成E:nth-child(2n-1)
E:nth-last-child(n)
li:nth-last-child(3) { color: red; }E:nth-of-type(n)
选择与E同类型的标签（将不同类型的标签剔除）的前提下，寻找E的父类的第n个E子元素
li:nth-of-type(3) {
color: red;
}
运行结果：数字3是红色的，li0的父类的子元素，在nth-of-type选择器下只有两个，分别是li0和li6，ul因类型原因被排除，所以外层的li是不受影响的，ul下的li1的父类的第三个li子元素是li3
last-of-type，nth-of-type，nth-last-of-type同理
empty找内容是空的元素
-
必须是空，空格也不行
-
如果是在::before和::after里增加了文字，是可以被选中的，
- 1
- 2
- 3
- 4
运行效果：
li::before{
content: 'asdf';
}
li:empty{
width: 100px;
height: 30px;
border: 1px solid black;
}
运行结果：边框效果依然生效
:enable匹配表单中激活的元素，:disabled 匹配表单中禁用的元素
input:enabled {
border: 1px solid red;
}
input:disabled {
border:1px solid blue
}
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
