CSS 参考

本“CSS参考”页面展现了CSS规则的基本语法，其中依照字母顺序列出了所有标准的 CSS 属性、伪类、伪元素、@规则、单位和选择器，此页面允许您快速访问各个词条的详细内容。此页面不仅列出了 CSS1 和 CSS2.1 的属性，还列出了 CSS3 中已标准化或已固定的属性和概念。当然，也有简要的DOM-CSS / CSSOM 参考。

需要注意的是，CSS 规则定义是完全基于文本的，而规则管理系统DOM-CSS / CSSOM 是基于对象的。

您也可以通过查看Mozilla浏览器CSS 扩展了解那些 Gecko 特定的带 moz 前缀的CSS属性，查看WebKit 浏览器CSS 扩展 以了解那些 WebKit 特定的 CSS 属性。另外，您还可查看由Peter Beverloo 浏览器带提供者的 CSS 属性。

基本规则语法

请注意在一项规则定义中，任何语法错误都会导致整个规则无效。

样式规则

selectorlist { property: value; [more property:value; pairs] } ...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists] See selector, pseudo-element, pseudo-class lists below.

示例

strong { color: red;}                                
div.menu-bar li:hover > ul { display: block; }

更多相关示例请参见: #1, #2

@ 规则

对于它们来说有着许多不同的结构格式，相关语法请查看所期望的 @规则 。

关键字索引

选择器

• 基本选择器
  1. 元素选择器  elementname(元素名称)
  2. 类选择器   .classname(类名)
  3. ID选择器    #idname(标志名)
  4. 通配选择器  * ns|* *|*
  5. 属性选择器 [属性=值]
• 组合选择器
  1. 相邻兄弟选择器 A + B
  2. 普通兄弟选择器 A ~ B
  3. 子选择器 A > B
  4. 后代选择器 A B
• 伪元素
  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::selection
  6. ::backdrop
  7. ::placeholder
  8. ::marker
  9. ::spelling-error
  10. ::grammar-error
• 伪类
  1. :active
  2. :any
  3. :checked
  4. :default
  5. :dir()
  6. :disabled
  7. :empty
  8. :enabled
  9. :first
  10. :first-child
  11. :first-of-type
  12. :fullscreen
  13. :focus
  14. :hover
  15. :indeterminate
  16. :in-range
  17. :invalid
  18. :lang()
  19. :last-child
  20. :last-of-type
  21. :left
  22. :link
  23. :not()
  24. :nth-child()
  25. :nth-last-child()
  26. :nth-last-of-type()
  27. :nth-of-type()
  28. :only-child
  29. :only-of-type
  30. :optional
  31. :out-of-range
  32. :read-only
  33. :read-write
  34. :required
  35. :right
  36. :root
  37. :scope
  38. :target
  39. :valid
  40. :visited

可参见选择器规范3中的完整 选择器列表。

CSS3 教程

以下“如何……”形式的页面将描述一些 CSS3 中新出现的或者之前在 CSS2.1 中但未得到充分支持的技术:

1. 如何使用媒体查询
2. 如何使用 CSS 计数器
3. 如何使用 CSS 渐变
4. 如何使用 CSS 变形
5. 如何使用 CSS 动画
6. 如何使用 CSS 过渡
7. 如何使用 CSS 多背景
8. 如何使用 CSS 弹性盒
9. 如何使用 CSS 多列布局

概念

1. CSS 语法
2. @规则
3. 注释
4. 优先级
5. 初始值
6. 继承
7. 指定值
8. 计算值
9. 使用值
10. 实际值
11. 解析值
12. 盒式模型
13. 替换元素
14. 属性值定义语法
15. 简写属性
16. 外边距合并
17. 视觉格式化模型
18. 布局模式

DOM-CSS / CSSOM

主要的对象类型：

1. 文档 . 样式表  document . styleSheets
2. 样式表[x] . CSS规则   styleSheets[x] . cssRules
3. CSS规则[x] . (选择器 和 样式)    cssRules[x] . cssText (selector & style)
4. CSS规则[x] . 选择文本   cssRules[x] . selectorText
5. 元素 . 样式   elem . style
6. 元素 . 样式 . CSS文本(合适样式)   elem . style . cssText (just style)
7. 元素 . 类名   elem . className
8. 元素 . 类列表   elem . classList

重要的方法：

1. CSS样式表.插入规则  CSSStyleSheet.insertRule
2. CSS样式表.删除规则  CSSStyleSheet.deleteRule