新增选择器

选择器

选择器

兄弟选择器

E+F 选中下一个满足条件的兄弟元素节点
- 只有第一个p标签变色
E ～ F 选中所有满足条件的兄弟元素节点
- 选中所有p标签
  并列选择器
E[条件] 选中指定条件的节点
- 选中div中并且有data属性的节点
E[data～=‘a’]选中div中所有条件是data=“a”的节点
- 选中1 和 3
  伪元素选择器
  伪类和伪元素的区别
1个相同点：都是被添加到一个选择器末尾的关键字
2个不同点：
伪类是以1个冒号(:)作为前缀被添加到选择器末尾的关键字；
- 如果伪类你用了2个冒号，不会报错，但也不会生效，比如 ::hover；
伪元素是以2个冒号(::)作为前缀被添加到选择器末尾的关键字
- 但伪元素你用1个或2个冒号不会报错且有效，比如，:before，::before
注：建议按照W3C标准伪元素用2个冒号，1个冒号有效果是因为向前兼容，让老的浏览器也能支持

::placeholder 拥有placeholader的被选中
::selection 字体选中后的状态
鼠标滑动选中字体后变色
只支持三个属性，color 、 background、text-shadow

伪类选择器

:not() 排除选择器
:not 非选择器
- div:not(.demo) {
  选中div中class不是.demo的元素
- 适用案例
- li:not(:last-of-type) {
  border-bottom: 1px solid red;
  除了最后一个li，都加上底部下划线
  :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素
css2中定义的选择器
p:first-child
- 匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child
- 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child
- 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
  :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
p:first-of-type
- 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type
- 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type
- 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。
  同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
  :root 根标签选择器
:root {
background-color: red
}
相当于html元素，但不完全等于html，只是包含html

:target 锚点选择器
可用于选取当前活动的目标元素。当 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。
举例：
a:target {
当location.hash = xxx时触发
}
实现tab栏切换

:empty选中内容为空的节点
选中第二个没有任何内容的div

:checkbox选中后改变
input选中后span的after展示

:disabled选中禁止点击的节点
css节点被操作时显示
```html <!DOCTYPE html>