CSS3-选择器

关系选择器

1. E+F：下一个满足条件的兄弟元素节点 div + p (选中和div并列的第一个p)
2. E~F：所有满足条件兄弟元素节点 div ~ p (选中和div并列的所有p)

属性选择器

1. div[class~=“a”] // 选中class值中有a
2. div[class|=“a”] // 选中class值以a开头 或a-开头
3. div[class^=“a”] // 选中class值以a开头
4. div[class$=“a”] // 选中class值以a结尾
5. div[class*=“a”] // 选中只要class值包含a

伪元素选择器

1. E::placeholder
   input::placeholder (修改input placeholder 提示文字的颜色)
2. E::selection
   div::selection (当选中div后 可以修改背景颜色 字体颜色)

伪类选择器（被选中的元素一种状态）

1. E:not() (场景 一个列表 列表中每一项有下划线，最后一项取消下划线， li:not(:last-of-type) { border-bottom: 1px solid black;} )
2. E:root 根标签选择器
3. E:target (哪个div身上的id成了location.hash的值了，哪个div就变成target的状态)
4. E:empty (选中元素内容为空)

• （下面其他元素会产生影响）

5. E:first-child (该类/元素中的第一个，如果有其他元素会产生干扰)
6. E:last-child (选中该类/元素中的最后一个，如果有其他元素会产生干扰)
7. E:only-child (选中该类/元素在父元素中的唯一)
8. E:nth-child(n) (选中该类/元素的第n个，如果有其他元素会产生影响)
9. E:nth-last-child(n) (倒着找)

• （下面其他元素不会产生影响）

10. E:first-of-type (选择类型的第一个 排除干扰)
11. E:last-of-type (选择类型的最后一个 排除干扰)
12. E:only-of-type（只有一个类型的儿子 排除干扰）
13. E:nth-of-type(n) (选类型的第n个 排除干扰)
14. E:nth-of—last-type(n) (倒着选)

• （下面是常用的input伪类）

1. input:checked (当input 选中checked时， 设置样式)
2. input:enabled (当input 选中enabled时， 设置样式)
3. input:disabled (当input 选中disabled时， 设置样式)
4. input:read-only (当input 选中readonly时， 设置样式)
5. input:read-write(当input 选中readwrite时， 设置样式)