CSS笔记（二）

1. 常用选择器

最常用的选择器类型是类型选择器和后代选择器。

类型选择器用来寻找特定类型的元素，比如段落p或标题元素h1。类型选择器有时候也称为元素选择器或简单选择器。

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。

2.ID选择器和类选择器

ID选择器由一个#字符表示，类选择器由一个点号表示。

许多CSS开发人员过度依赖类选择器和ID选择器，一种简单得多的方法是结合使用类型，后代，ID和类这几种选择器。

如果你发现自己的文档中添加了许多不必要的类，那么这可能是文档结构不合理的一个警告信号。不要给这些元素指定不同的类，而因将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们。

3. 伪类选择器

:link和:visited称为链接伪类，只能应用于锚元素。:hover，:active和:focus称为动态伪类，理论上可以应用于任何元素。大多数浏览器都支持这些功能。但是，IE6只注意应用于锚链接的:active和:hover选择器，完全忽略:focus。在IE7任何元素上都支持:hover，但是忽略:active和:focus。

通过把伪类连接在一起，可以创建更复杂的行为。

4.通用选择器

通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有的可用元素。通用选择器由一个星号*表示。

通用选择器一般用来对页面上的所有元素应用样式。于其他选择器结合使用时，通用选择器可以用来对某个元素的所有后代应用样式。

5.子选择器和相邻同胞选择器

后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。使用方式如：p>a

IE7和更高的版本都支持子选择器。但是在IE7中有一个bug，如果父元素和子元素之间有注释，就会出现问题。

在IE6和更低的版本中，可以使用通用选择器模拟子选择器的效果。先在所有后代上应用你希望的子元素样式，然后使用通用选择器覆盖子元素的后代上的样式。

相邻同胞选择器可用于定位同一个父元素下某一个元素之后的元素。使用方式如：h1 + p

与子选择器一样，如果在目标元素之间有注释，这在IE7中也会出现问题。

6.属性选择器

属性选择器可以根据某个属性是否存在或属性的值来寻找元素。使用方式如:a[href]或a[ref="nofollow"]等。

一些属性可以有多个值，值之间用空格分隔。

7. 层叠

要寻找同一个元素可能有两个或更多规则，CSS通过一个称为层叠的过程处理这种冲突。层叠给每个规则分配一个重要度。

层叠采用以下重要度次序：

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

然后根据选择器的特殊性决定规则的次序。具有更特殊选择器的规则优先于具有一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。

8.特殊性

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

选择器的特殊性分成4个成分等级：a,b,c,d

• 如果样式是行内样式，那么a=1
• b等于ID选择器的总数
• c等于类，伪类和属性选择器的数量
• d等于选择器和伪元素选择器的数量

使用这些规则可以计算任何CSS选择器的特殊性。

在修复bug时，特殊性极其重要，因为你需要了解哪些规则优先和其原因。解决特殊性冲突，能让代码更简洁。

一种有意思的特殊性用法是在主体(bod)标签上应用类或ID，这样做之后，就可以根据页面或在站点范围内覆盖样式。

9.继承

应用样式的元素的后代会继承其样式的某些属性，比如颜色和字号。继承这一性质非常有用，因为它使开发人员不必在元素的每个后代上添加相同的样式。

正如恰当使用层叠可以简化CSS，恰当使用继承可以减少代码中选择器的数量和复杂性。