web前端——CSS选择器

一、 复合选择器
a) 后代选择器 爷爷 爸爸 儿子 … 末代{ … }

1. 匹配方式：没有层次的限制
   b) 子代选择器 爷爷>爸爸>儿子>…>末代{ … }
2. 匹配方式：一代限制
   c) 相邻选择器 选择器+标签选择器{ … }
3. 匹配方式：选择器的下一个同辈(并列)元素
   d) 同辈选择器 选择器~标签选择器{ … }
4. 匹配方式：选择器的下面所有同辈(并列)元素
   e) 并集选择器 选择器1,…,选择器n { … }
5. 匹配方式：所有列表选择器
   f) 交集选择器 标签选择器[./#]名称{ … }
6. 匹配方式 同名标签上使用了类或者id选择器的标签，其他标签无法使用该类或id选择器
   g) 层次选择器
7. 选择器 空格/> :first-child/nth-child(n)/last-child{ … }
8. 匹配方式：没有标签的限制，通过编号直接定位第n个后台元素
9. [标签]选择器:first-of-type/nth-of-type(n)/last-of-type{ … }
10. 匹配方式：匹配第n个固定标签
11. nth-child(odd /even) /标签选择器:nth-of-type(odd /even) 奇偶号差别对待
12. 筛选选择器：选择器:not(层次选择器) … :not(层次选择器){ … }
    h) 属性选择器：主要应用于表单元素
13. [属性] 匹配包含属性的所有标签
14. [属性=’值’] 匹配属性为特定值得标签
15. [属性^=’值’] 匹配属性以特定值开始的标签
16. [属性$=’值’] 匹配属性以特定值结束的标签
17. [属性*=’值’] 匹配属性包含特定值的标签
18. [属性|=’值’] 匹配属性包含特定值的标签
    注意：两个优先级相同的选择器有交集，后者覆盖前者
    二、 伪类选择器 a (link,hover,active,visited)
    a) 选择器:hover{ … }
    三、 定位 position
    a) 布局方式：标准文档流 static
    b) 定位：
19. z-index:n; 层叠 值越大离用户越近
20. 相对定位：标准文档流 relative
    可以相对于标准位置进行偏移，但其真实位置依旧不变，不可占用。和文档一起随窗口滚动
    left:npx 左右偏移 +右 -左
    top:npx 上下偏移 +下 -上
21. 绝对定位：脱离标准文档流 absolute
    可以相对（父辈中第一个定位元素或浏览器）偏移，但其真实位置变了，将被别人占用；如果绝对定位元素不偏移，他的位置在上层位面空间中的同一个投影位置。和文档一起随窗口滚动
    偏移方式同relative
    水平居中：left:50%; margin-left:(-width/2)px
22. 固定定位：脱离标准文档流 fixed
    可以相对浏览器偏移，但其真实位置变了，将被别人占用；如果绝对定位元素不偏移，他的默认位置在上层位面空间中的同一个投影位置。不会随窗口滚动
    偏移方式同relative