网站用户体验整合设计-体验css+div 之层叠和特殊性

体验css+div 之层叠和特殊性

Post by 张美工, 2008-7-9, Views:

　　即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素。CSS通过一个称为层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要度。样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为！important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。

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

*标为！important的用户样式。

*标为！important的作者样式。

*作者样式

*用户样式

*浏览器/用户代理应用的样式。

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

1。特殊性

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

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

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

*b=ID选择器的总数。

*c=类、伪类和属性选择器的数量。

*d=类型选择器和伪元素选择器的数量。

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

2。在样式表中使用特殊性

　　在编写CSS时特殊性非常有用，因为它可以对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。例如，假设希望站点上大多数表单的宽度是30em，但是搜索表单的宽度只有15em：

form{width:30em;}

form#search{width:15em;}

　　在创建新表单时，不需要为修改CSS中的任何东西操心，因为你知道会正确地应用样式。但是，在大型站点上，会发现例外情况越来越多。例如，希望登录表单的宽度是20em，大型应用程序表单的宽度是40em。每当创建更特殊的样式时，可能需要覆盖一些一般规则。这可能需要一些额外的代码。而且，因为元素可以从许多地方获得样式，情况可能变得非常复杂。

　　为了避免过分混乱，我尽量保持一般性样式非常一般，特殊样式尽可能特殊，从而不需要覆盖特殊样式。如果发现不得不多次覆盖一般样式，那么从一般规则中删除需要的声明，并且将它显式地应用于需要它的每个元素，这样可能比较简单。

3。在主体标签上添加类或ID

　　一种有意思的使用特殊性的方法是在主体（body）标签上应用类或ID。这样做之后，就可以根据页面或在站点范围内覆盖样式。例如，如果希望主页具有与站点其余部分不同的布局，那么可以在主页的主体元素上添加一个类名，并且使用它覆盖样式：

#content{float:left;}

.homepage #content{float:right;}

#nav{float:right;}

.homepage #nav{float:left;}

　　在后面你会看到如何使用这种技术在站点导航中向访问者突出显示当前页面。

　　在站点的每个页面上添加一个ID，这样用户就能够用自己的用户样式表覆盖你的样式表。站点范围的ID（俗称为CSS签名）一般采用id=“www-zhangmeigong-cn”格式。用户至少可能希望覆盖你选择的字号或颜色方案，从而让站点更容易阅读。为些，他们可以将以下规则添加到自己的用户样式表中：

body#www-zhangmeigong-cn{font-size:200%

background-color:black;

color:white;}