Pro CSS Techniques 读书笔记（三）

http://www.ctba.cn/blog/entry/2225

首先是对昨天关于伪元素的一些补充：

伪元素包括 4 种：:first-line, :first-letter, :before, :after
用途与 伪类相似但只能被附加到组合选择符中的最后一个简单选择符上。

IE6 支持 :first-line 和 :first-letter，但有一些缺陷；IE7 及一下版本不支持 :before 和 :after。关于伪元素的最新支持情况可以 看这里。

:first-line 能设计嵌套于目标元素中的某个元素的文本，只要两者都是 block-level 并且嵌套的元素没有被定位或浮动，比如：

div:first-line {
   font-weight:bold
}

尽管 p 没有被锁定，但也会应用 bold 样式

<div><p>扯谈社</p></div>

因为文本在第一行，因此它与 first-line 匹配。
:first-letter 与 first-line 相 似。

:before 和 :after

content 属性是他们成功的关键。比如 CTBA 原先的个人主页中，个人简介是 被两个引号包围起来的，表示这个人说的一段话，这种情况就可以简单的使用这两个伪元 素来实现：

div#sign:before {
   content: "“"
}
div#sign:after {
   content: "”"
}

content 属性只包括了那些我们想在 div 元素之前和之后显示的字符。空间对于我们要生成的内容而言是个非常大的限制（若要探讨其可行性请参考 这里 ）

:after 有个最常见的用途是在打印页面时，显示所有外部链接的 url 和 实际的链接文本，比如：

a [href^='http://']:after {
   content: " [" attr(href) "]"
}

级联：计算优先级

优先级就是规则之间的相互作用，以及某条规则相对于其他规则而言 更加重要（并因此覆盖它们）。

保持评分

一条规则的优先级来自于他选择符每一部分的“得分”，分数是根据重要性决定的，下面的排列从做不重要到最重要：

1. 元素选择符（包括伪元素选择符）
2. 类选择符（包括特性和伪类选择符）
3. ID 选择符
4. 行内样式

理解评分机制

我们从一个例子直观的理解下评分机制。下表中的选择符按优先级排序，从第一行到最后一行，优先级由低到高。分值是每个组合选择符中的给定选择符的总分。

选择符 行内样式得分 ID 选择符得分 类选择符得分 元素选择符得分
h1 0, 0, 0, 1,
p 0, 0, 0, 1,
div h1 0, 0, 0, 2,
div p 0, 0, 0, 2,
div.module h1 0, 0, 1, 2,
div.module p 0, 0, 1, 2,
div#content h1 0, 1, 0, 2,
div#content p 0, 1, 0, 2,

注意：当通配选择符在组合选择符中是（如#content *p，锁定任何是 #content 的 <p> 元素），它的值为 0，或单独使用时他的值为 0,0,0,0。

影响优先级的几种例外

1. 当具有相同优先级的两个或两个以上的选择符都能匹配同一元素时，最后一个匹配的选择符有限。一个例子：

<div id="main">
   <div id="content">
      <p class="group">digg & share - 扯谈小组</p>
   </div>
</div>

尽管下面两个选择符都能匹配 <p class="group">，但此处只能应用后面的规则

#content p.note {
   color: orange
}
#main p.note {
   color: blue
}

2. 行内样式（即在 html 标签内嵌入 style=""），这个已经在优先级的开始部分说明了，非常狠，除了 !important 外，它可以替代其他任何特定元素匹配的选择符 O__O

3. 一条规则中的 !important 声明会替代任何具有同等甚至更高优先级规则中的相同属性。一个例子：

p {
   color: orange !important
}
p {
   color: green;
   font-weight: bold
}

color 被含有 !important 的 orange 覆盖，而字型因为第一个 p 中没有定义，所以第二个 p 中的定义不受影响；段落中的文字为橙色加粗。

纠正一个错误观点

!important 有时会用在跨浏览器的 hack 上，导致一些人认为 IE6 不识别 !important，而 firefox 和 IE7 识别，那就错了。IE6/7 及 Firefox 都识别 !important，只是 IE7 及 Firefox 尊重 !important 最高优先权，而 IE6 虽然识别到了 !important，但如果后面包含相同属性的样式，还是会将 !important 的风格覆盖掉，举个例子：

#tab {
   height: 20px!important;
   height: 22px
}

IE7 及 Firefox 的 tab 高度为 20px，而 IE6 为 22px

#tab {
   height: 22px;
   height: 20px!important
}

如果是这样，三个浏览器 tab 的高度就都为 20px 了

希望还能看的下去，关于不同核心浏览器间的表现差异还有很多值得继续探讨的，后面会详细介绍一些变通的手法以及优良的 hack，避免人为制造浏览器 BUG。