读书笔记

一、选择器

1、比较少用的一个标签：

blockquote：<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

2、常用的伪类：

all unvisited links：a:link，all visited links: a:visited，鼠标在上悬浮的连接:a:hover，获得焦点的input:input:focus，另外还有：active。:link和:visited称为连接伪类，只能用于锚元素，:hover、:active、:focus称为动态伪类，理论上可以应用于任何元素。但是IE6只注意用于锚链接的:active和:hover选择器，完全忽略:focus，IE7在任何元素上都支持:hover，但是完全忽略:active和:focus。另外，还有比较有用的:first-child伪类。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

个人觉得：hover是最重要的一个伪类，很多纯css实现的组件，往往是借助于这个特性，而可以不用js辅助实现的。

另外，通过把伪类连接在一起，可以创建更复杂的行为，比如在已访问连接和未访问连接上实现不同的鼠标悬停效果。a:visited:hover {color:olive}。

关于伪类，w3c school上有清楚的描述。http://www.w3school.com.cn/css/css_pseudo_classes.asp

3、常用的选择器

元素选择器：p {color:red}

类选择器：.nav {color:red}

id选择器：#content {color：red}

后代选择器：blockquote p {padding-left：2em;}

通常上面几种选择器组合使用，就可以实现大多数选择功能。不要在每个元素上都加上不同的类，而应该在它们的祖先上应用一个id或类，然后通过后代选择器选择它们

4、通用选择器：

*{padding:0;}

5、子选择器，子选择器只选择元素的直接后代，即子元素。如，#nav>li{}，注意，IE6不支持，IE7中有bug，如果父元素和子元素之间有html注释，就会有问题。在ie6中，可以通过通用选择器模拟子选择器，现在父元素的后代上应用样式，然后用通用选择器覆盖非直属后代的样式，如：

#nav li{

background:url{folder.png} no-repeat left top;

padding-left:20px;

}

#nav li *{

background-image:none;

padding-left:0;

}

 

6、相邻选择器：

相邻选择器用于选择处于同一个父元素下某个元素之后的元素。如让紧挨着标题的段落出现文字稍大一点的效果：

h2 + p{
    font-size:1.4em;
    font-weight:bold;
    color:#777
}

与子选取器类似，相邻选择器在ie中有一样的缺陷。

7、属性选择器

属性选择器可以根据某个元素是否存在或属性的值来寻找元素，因此能够实现某种非常有意思和强大的效果。比如让有提示的元素底边框出现特殊效果：

td[title]{
    border-bottom:1px dotted #999;
}
td[title]:hover,td[title]:focus{
    cursor:help;
}

属性选择器还可以根据属性的值来应用样式:a[ref="nofollow"] {}

包括IE7的现代浏览器都支持属性选择器，但是IE6不支持，所以，可以利用这一特性，为ie6的浏览器应用特殊样式，为其他的现代浏览器应用较好的样式：

#header{
    background:url{branding-bw.png} repeat -y left top;
}
[id="header"]{
    background:url{color.png} repeat-y left top;
}

选择器个人总结：CSS选择器和JQuery的选择器在很大程度上几乎一样。

二、样式与层叠

1、层叠的规则

CSS为什么叫做层叠样式表，层叠（Cascade）是指处理一个元素上可能有两个或更多规则，CSS通过层叠来处理这多个规则的冲突，层叠的过程就是优先级高的规则覆盖优先级低的规则。作者的样式，是指站点开发者定义的样式，用户可以通过浏览器应用自己的样式。层叠采用以下重要度次序

• 标有!important的用户样式
• 标有!important的作者样式
• 作者样式
• 用户样式
• 浏览器/用户代理应用的样式

2、特殊性，根据选择器的特殊性决定规则的次序。具有更特殊的选择器的优先级优于更一般的选择器的规则。如果两个选择器的特殊性相同，则后面的优于前面的 。

为了计算规则的特殊性，给每种选择器都分配一个数值，然后将规则的每个选择器的值加在一起，计算出规则的特殊性。特殊性的计算不是以10为基数的，而是采用一个更高的未指定的基数。这样能够确保非常特殊的选择器（比如ID选择器）不会被大量一般选择器（比如类型选择器）所超越。但是，为了简化，如果在一个特定的选择器中选择器的数量少于10个，那么可以以10为基数计算特殊性。

选择器的特殊性分为4个等级：a、b、c、d。

如果样式是行内样式，那么a=1

b等于ID选择器的总数

c等于类、伪类和属性选择器的数量

d等于类型选择器和伪元素选择器的数量

特殊性示例

选择器 特殊性 以10为基数的特殊性

style="" 1,0,0,0 1000

#wrapper #content {}   0,2,0,0 200

#content .dateposted{} 0,1,1,0 110

div#content{} 0,1,0,1 101  

#content {} 0,1,0,0 100

p{} 0,0,0,1 1 

总结一句话：用style风格编写的规则比其它所有规则都优先，ID选择器比类选择器优先，类选择器比类型选择器优先。

3、继承

继承不等于层叠，继承是指应用样式的后代元素会继承某些属性，如颜色和字号，对于IE中的表格例外。需要注意的是：继承而来的样式的特殊性为0，所以直接应用于元素的任何样式总会覆盖继承而来的样式。

三、样式表的组织与规划、维护

对于文档，样式表可以链接也可以导入：

<link href="" ref="stylesheet" type="text/css"/>

<style type="text/css">

@import url("/css/advanced.css");

</style>

还可以将另一样式表导入样式表。但是导入的样式表，比链接的慢。关于使用多个css文件，还是一个css文件，多个css文件会导致服务器发送更多的数据包，会影响下载时间。另外，浏览器只能从同一个域中同时下载有限的文件，对于老式浏览器，常常是两个，现代浏览器通常是8个。因此多个css文件可能会影响下载速度。