当前位置: 代码迷 >> HTML/CSS >> Pro CSS Techniques 读书笔记(3)
  详细解决方案

Pro CSS Techniques 读书笔记(3)

热度:550   发布时间:2012-11-07 09:56:10.0
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。
1 楼 gladstone 2008-12-29  
居然是沙花!
2 楼 gladstone 2008-12-29  
我大能的ctba众呢?火车呢?田老师呢?赶紧出来顶
3 楼 unbounder 2008-12-29  
第一次路过时沙发还没被占呢。。