css选择器有哪些？

  1. 通用选择器：选择所有元素，*不参与计算优先级**，兼容性 IE6+
  2. #X id 选择器 ：选择 id 值为 X 的元素，兼容性 IE6+
  3. .X 类选择器： 选择 class 包含 X 的元素，兼容性 IE6+
  4. X Y 后代选择器：选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性 IE6+
  5. X 元素选择器：选择所有标签为 X 的元素，兼容性 IE6+
  6. :link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: IE4+
  7. X + Y 直接兄弟选择器：在X 之后第一个兄弟节点中选择满足 Y 选择器的元素，兼容性： IE7+
  8. X > Y 子选择器： 选择 X 的子元素中满足 Y 选择器的元素，兼容性： IE7+
  9. X ~ Y 兄弟： 选择X 之后所有兄弟节点中满足 Y 选择器的元素，兼容性： IE7+
  10. **[attr]**：选择所有设置了 attr 属性的元素，兼容性 IE7+
  11. **[attr=value]**：选择属性值刚好为 value 的元素
  12. **[attr~=value]**：选择属性值为空白符分隔，其中一个的值刚好是 value 的元素
  13. **[attr|=value]**：选择属性值刚好为 value 或者 value-开头的元素
  14. **[attr^=value]**：选择属性值以 value 开头的元素
  15. **[attr$=value]**：选择属性值以 value 结尾的元素
  16. **[attr=value]***：选择属性值中包含 value 的元素
  17. **[:checked]**：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
  18. X:after, X::after：after 伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3 中::表示伪元素。兼容性:after 为 IE8+，::after 为 IE9+
  19. :hover：鼠标移入状态的元素，兼容性 a 标签 IE4+， 所有元素 IE7+
  20. :not(selector)：选择不符合 selector 的元素。不参与计算优先级，兼容性：IE9+
  21. ::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性 IE5.5+
  22. ::first-line：伪元素，选择块元素的第一行，兼容性 IE5.5+
  23. **:nth-child(an + b)**：伪类，选择前面有 an + b - 1 个兄弟节点的元素，其中 n >= 0， 兼容性 IE9+
  24. **:nth-last-child(an + b)**：伪类，选择后面有 an + b - 1 个兄弟节点的元素 其中 n >= 0，兼容性 IE9+
  25. X:nth-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择前面有 an + b - 1 个相同标签兄弟节点的元素。兼容性 IE9+
  26. X:nth-last-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择后面有 an+b-1 个相同标签兄弟节点的元素。兼容性 IE9+
  27. X:first-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的第一个子元素。兼容性 IE7+
  28. X:last-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性 IE9+
  29. X:only-child：伪类，选择满足 X 选择器的元素，且这个元素是其父元素的唯一子元素。兼容性 IE9+
  30. X:only-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性 IE9+
  31. X:first-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素 是此此类型元素的第一个兄弟。选中它。兼容性 IE9+

css sprite

概念：

将多个小图片拼接到一个原片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

  1. 减少 HTTP 请求数，极大地提高页面加载速度
  2. 增加图片信息重复，提高压缩比，减少图片大小
  3. 更换风格方便，只需在一张或几张图上修改颜色或样式即可实现

缺点：

  1. 图片合并麻烦
  2. 维护麻烦，修改一个图片可能需要重新布局整个图片，样式