1. 特殊性

特殊性是一个选择器“特殊程度”的数字表示，有 3 样东西经常被用来确定选择器的特殊性：

• 每个元素描述符贡献 0，0，0，1；
• 每个类、伪类或者属性描述符贡献 0，0，1，0；
• 每个 ID 描述符贡献 0，1，0，0.

选择器	权重	描述符
div ul ul li	0,0,0,4	4个元素描述符
div.aside ul li	0,0,1,3	1个类描述符，3个元素描述符
a:hover	0,0,1,1	1个伪类描述符，1个元素描述符
div.navlinks a:hover	0,0,2,2	1个伪类描述符，1个类描述符，2个元素描述符
#title em	0,1,0,1	1个ID描述符，1个元素描述符
h1#title em	0,1,0,2	1个ID描述符，2个元素描述符

当特殊性相等时后声明的规则会胜出。特殊性标识符第一位的 0 是用于行内样式的，且仅用于行内样式。

div#header {
  background: purple;  /* 0，1，0，0 */
}

<div id="header" style="background: blue;">  /* 1，0，0，0 */

2. 重要性

任何标记为重要的声明都需要有自己的 !important
任何重要的声明都会覆盖非重要的声明

3. 通用选择

* 作用是选择文档中的全部元素并对其应用样式
div * 作用是选择这个 div 中的全部子元素

4. 简单的属性选择

a[href] 会选择所有含有 href 属性的 a 元素
a[href="http://w3.org/"] 选择指向某个特定地址的全部超链接

5. 部分属性值选择

a[href*="w3.org"] 属性值中包含该字符序列，应该区分属性值的大小写。

img[src*="mainlogo.png"] 它会选择任何指向 mainlogo.png 文件的图像（img）元素，或者是 src 属性值中包含 mainlogo.png 这些字符的图像元素。因此，它将同时选择：

<img src="/img/2010/mainlogo.png.gif" alt="ConHugoCo Inc." />
<img src="/img/2010/mainlogo.pngdir/big.png" alt="ConHugoCo Inc." />

6. 更多部分属性值选择

a[href^=”http”] 选取任何 href 属性值是以 http 开头的链接元素
a[href$=”.pdf”] 选择 href 属性值是以 .pdf 结尾的链接元素

属性	选取对象
a[href^=”https”]	安全服务器链接
a[href^=”mailto”]	电子邮件联系链接
a[href^=”aim”]	AOL即时通信服务链接
a[href^=”.doc”]	微软Word文档
a[href^=”.xls”]	微软Excel文档
a[href^=”.zip”]	压缩文档

7. 兄弟选择

h2 + p 紧跟在 h2 后的 p 元素
h1 ~ ul 位于 h1 元素后面且与之共享父元素的 ul 元素，不包括直接相邻的兄弟元素

8. 调整字体值的顺序

font: <font-size> <font-family>;

必须同时包含这两个值并且按照既定的顺序进行书写。如果颠倒了顺序，或者漏掉了其中的一个，则任何现代浏览器都会完全忽略这条声明。此外，如果在声明中包含了其他关键字，则它们全部都得放在这两个必备的值前面。

9. 玩转行高

font: 100%/2.5 Helvetica， sans-serif;

为 font 声明添加行高值得操作总是可选的，但是如果已经包含了行高值，则它的放置位置就是固定的了，必须紧跟在字号后面加一个斜杠再加上行高值才行。

10. 无单位的行高值

无单位的行高值表示后代元素所使用的一个换算系数（比如一个乘数）
所有继承了行高值为 1 的元素会把这个值同它们自身的字号计算值相乘。声明了 font-size: 10px 的列表项元素会有一个 10px 的计算后的行高值。

11. 抑制元素的可见性

span{ visibility：hidden； }  /* 被设置成 visibility: hidden 的元素仍然参与页面布局 */

12. 将元素移出屏幕

.hide {
  position: absolute;
  top: -10000em;
  left: -10000em;
}

已经从页面上移除，但是屏幕阅读器也能识别

13. 图像替换

使用负的文本缩进把文本移到元素的左侧

h1 {
  height: 140px;
  text-indent: -9999px;
  background: url(page-hader.gif);
}

我们没有移动元素框的情况下将元素的文本内容移动到了屏幕之外。

14. 打印样式

有 3 种方式可以将打印样式关联到页面：

• <style type="text/css" media="print">...</style>
• <link type="text/css" rel="stylesheet" media="print" href="print.css">
• @import url(print.css) print;

几乎所有人都会使用 link 的方式，这是因为在每个页面中都嵌入打印样式表的效率非常低。

15. 凸排列表

使列表项的第一行悬挂在左侧，并使其他行保持在原位的一种技术。

ul{
  text-indent: -2em;
  list-style: none;
}

list-style: none 这条规则很重要，如果没有这个的话，每个列表项的第一行就不会被凸排，并且文本会跟列表标记重合。因此，不要把凸排和列表标记混着用。

16. 为列表添加标记

ul {
  list-sytle-image: url(star.gif);
}

潜在的缺点是你完全无法掌控图像的放置位置。可以将每个列表项的内容用一个元素包裹一下，这个元素可以是 div 或者 span。就可以定制列表标记的样式。

17. 生成列表标记

通过混合凸排和生成内容来实现的。

ul li:before {
  content: url(star.gif);
  margin-right: 8px;
}
ul li {
  text-indent: -20px;
  list-style: none;
}

18. 用轮廓代替边框

div{ outline: 1px dashed red; }

边框是参与布局的，而轮廓并不参与。轮廓必然是环绕着元素的，并且在元素的四周永远保持一致。你不能只设置左轮廓或者上轮廓。
轮廓只有两种情况：环绕元素四周的简单轮廓，或者干脆没有轮廓。元素是可以同时具有边框和轮廓的。在这种情况下，轮廓会绘制在边框之外，所有轮廓的内边缘会紧挨着边框的外边缘。如果元素具有外边距的话，则轮廓将绘制在外边距所在区域之上，但是外边距并不会被轮廓改变或者替换掉。

19. 框冲切

是一种可以在视觉上将元素框的一部分移除的技术。它仅在单色或固定图像背景上起作用。框冲切的最简单形式就是把一个框放在另一个框的角落里，并确保它的背景与周围的内容一致，而不是与它的父元素一致。

20. CSS 精灵

CSS 精灵(CSS sprite) 是一种可以实现快速悬停效果的技术，现在已经演变成了通过将装饰性的图片合并并下载，从而降低服务器负载的技术。CSS 精灵最基本的例子就是包含两种状态的图标，即一个挨着链接的正常显示版本，一个当链接被悬停时的”点亮”版本。

21. 滑动门

滑动门是一种可以使文本导航链接变成花哨的选项卡的技术。然而，通常的做法都只适用于效果而不试用于选项卡。

22. CSS 视差

CSS 视差是一种很精巧的技术，它能让我们了解基于百分比的背景图像定位可以那么简单而直接地创造出意想不到的效果。首先，考虑一下百分比定位是怎么实现的。假设你把一个背景图像的位置设置为 50% 50%，那么它的中心将与背景区域的中心对齐。类似地，如果设置为 100% 100%，那么它的右下角就会和背景区域的右下角对齐。这就意味着背景图像位置的百分比值实际上被使用了两次。第一次用于找到背景区域中所定义的点，第二次用于找到图像本身中定义的点，然后再把这两个点对齐。

body{
  background: url(ice-1.png) -75% 0 repeat-x;
  width: 100%;
  padding: 0;
  margin: 0;
}
div#main{
  background: url(ice-2.png) 75% 0 repeat-x;
  width: 100%;
}

通过这样的设置，当浏览器窗口变宽时图片看起来就会使朝着远离窗口中心的方向移动的，这会产生类似”放大”的效果。而当窗口变窄时，图片会朝着窗口的中心移动，类似”缩小”的效果。

23. 图像的框

有些关于图像的东西，大多数人至今都没有意识到：它们与其他元素拥有相同的盒模型，这意味着你可以对图像元素应用诸如背景和内边距等样式。你可以为图像设置背景图像，做出一些有趣的组合效果：

内边距也可以很简单地应用在图像上。事实上，通过背景色、边框以及内边距的组合，可以使图像看上去具有深浅不一的双层边框。

再加上轮廓的话，你就会得到类似三层边框的效果了。

24. 受限的图像

img{ max-width:100%; }

这条简单的规则会保证图像不会比包含它们的元素更宽，不过在父元素比这些图像宽的情况下，它们会保持原始尺寸。你可以通过把图像在其父元素中居中来进行强化，像这样：

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

下图展示了将同一个图像放在 3 个不同宽度父元素中的例子，其中两个父元素比图像还窄，一个比图像宽(父元素的边缘已通过边框标出)。

这很明显会使你的图像任由浏览器的缩放操作摆布，因为它们会缩小图像。

25. 表头、主体和脚注

HTML 为表格定义了 3 个元素用于对行进行分组，它们是 thead(表头)，tbody(表格主体) 和 tfoot(脚注)。毫不奇怪，这些元素分别代表了表格的表头，主体部分以及脚注部分。

26. 行标题

有一个 HTML 属性在当初设计的时候就是用来让你指定一个 th 元素是列标题还是行标题的。表格主体中的每一行都以 th 元素开头，那些就是行标题。

<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Pageviews</th>
      <th scope="col">Visitors</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January 2010</th>
      <td>1367234</td>
      <td>326578</td>
    </tr>
    <tr>
      <th scope="row">February 2010</th>
      <td>1491262</td>
      <td>349091</td>
    </tr>
  </tbody>
</table>

为 th 元素恰当地添加已赋值的 scope(作用域)属性，相当于明确地告诉浏览器 th 元素与它周围单元格的关系。

27. 多背景

CSS3 中真正时髦的东西之一，就是它对于给定元素支持多个背景图像。

.div {
  background: url(bg01.png) top left no-repeat,
              url(bg02.png) top right no-repeat,
              url(bg03.png) bottom right no-repeat,
              url(bg04.png) bottom left no-repeat;
  background-color: #fff;
}

多背景的应用顺序是从“最高”到“最低”的，即以你观看页面的视角来看，是从最靠你的到离你最远的顺序应用。如果你把颜色放到第一个背景上，它就会位于其他背景的“上面”。这也意味着，如果你想让某种图案背景在所有背景的最后方，那么就需要把它放在最后一个并且确保把任何背景颜色的值也移到这个值中。

28. 二维变换

可以通过 transform-origin 改变旋转或缩放的原点

transform-origin: bottom left;
transform-origin: 75% 0;