深入理解 CSS
程序员文章站
2022-03-29 16:05:40
...
转自:http://www.ibm.com/developerworks/cn/web/1009_chengfu_dojocss/
[size=x-large]选择器和声明[/size]
选择器（selector）定义了一种模式匹配规则，用来选择当前文档中的元素。符合规则的元素将被应用上与该选择器对应的样式声明。CSS 提供了一些基本的选择器。基本的选择器也可以进行组合，形成复杂的表达式。基本选择器的具体说明如下：
[list]
[*]通用选择器（*）：匹配文档中的任意元素。
[*]元素类型选择器：匹配文档中的某类元素。如 span匹配文档中所有的 span元素。
[*]后代选择器：匹配作为特定元素的后代出现的元素。比如 div span匹配包含在 div元素中的 span元素。
[*]直接后代选择器：匹配作为特定元素的直接后代出现的元素。比如 div > span匹配父节点是 div元素的 span元素。
[*]相邻兄弟元素选择器：匹配与特定元素有相同父节点，并且直接出现在该元素后面的元素。比如 div + span匹配与 div元素父节点相同，并且直接出现在 div元素之后的 span元素。
[*]属性选择器：匹配属性值满足某些条件的元素。如 div[title]匹配有 title属性的 div元素；div[title=Header]匹配 title属性的值为 Header的 div元素。
[*]类选择器：匹配包含某个 CSS 类的元素。如 .header匹配包含了 CSS 类 header的元素。类选择器实际上是属性选择器的一种，是根据属性 class的值来进行选择的。
[*]ID 选择器：匹配指定 ID 属性值的元素。如 #myDiv匹配 ID 为 myDiv的元素。
[*]伪元素和伪类选择器：匹配一些无法根据其在文档树中的位置来定位的元素。常用的伪元素选择器有：:first-line匹配段落中的第一行；:first-letter匹配块中第一行的第一个字母。常用的伪类选择器有：:link和 :visited分别匹配没有访问过的和已经访问过的链接；:hover匹配当前鼠标悬浮其上的元素；:active匹配当前被用户**的元素；:focus匹配当前有输入焦点的元素。
[/list]
声明是 CSS 中样式属性的名值对，其形式是“属性名称 : 属性值”。如声明“font-color : red”把样式 font-color的值设为 red。
[size=large]属性继承[/size]
对于 CSS 中的某些样式属性来说，如果元素没有显式的指定一个值，该属性就会继承该元素的父元素的这个属性的值。常见的会被继承的属性有：visibility、color、font和 text-decoration等。需要注意的是，发生属性继承的时候，子元素继承的是父元素属性的计算值，而不是指定值。比较典型的例子是通过 em或是百分数指定的字体大小。比如父元素的字体大小的声明是“font-size : 1.2em”，而实际计算出来的字体大小是 12px，则子元素继承的是 12px，而不是 1.2em。通过设置属性的值为 inherit可以让该属性强制继承其父元素对应属性的值。
[size=x-large]CSS 规则的层叠顺序[/size]
正如 CSS 的全称“层叠式样式表（Cascading Style Sheets）”所表示的含义一样，CSS 中的样式声明规则是有层叠顺序的。可以在不同的地方把相同的规则应用在相同的元素上面。比如对某个 P 元素，某条 CSS 规则将其文本颜色设为红色，而另外一个规则把其文本颜色设为蓝色。显然这两条规则是互相冲突的。在具体显示的时候，浏览器会根据层叠顺序来判断应用哪条规则，从而确定该 P 元素的文本颜色。层叠顺序的基本原则很简单，那就是越具体的规则，优先级越高。浏览器根据优先级高低来确定应用哪条规则。具体的来说，一条规则的优先级与其使用的选择器和所在的位置相关。下面分别进行说明。
根据所使用选择器的优先级顺序
在判断一条规则的优先级时，会首先判断其所用的选择器的优先级顺序。按照优先级从高到低的顺序排列如下：
[list]
[*]使用了 !important声明的规则。
[*]内嵌在 HTML 元素的 style属性里面的声明。
[*]使用了 ID 选择器的规则。
[*]使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
[*]使用了元素选择器的规则。
[*]只包含一个通用选择器的规则。
[/list]
当浏览器需要判断应用互相冲突的规则中的哪条规则的时候，首先会根据上面的顺序来判断优先级。优先级高的规则就会被应用。如果优先级相同，则需要进一步判断所使用的选择器的个数。选择器数目较多的规则优先级较高。比如下面两条规则：#myDiv .header .main {}和 #myDiv .header span {}，前者的优先级更高。因为前者有一个 ID 选择器，两个类选择器；而后者也有一个 ID 选择器，但是只有一个类选择器。上述的优先级判断算法类似于一般的数字大小比较，首先比较最高位，如果相同的话，再比较次高位，以此类推。
如果按照上面的优先级顺序来判断，规则的优先级相同的话（即所用的选择器类别相同，同类选择器的数量也相同），则需要进一步根据规则所在的位置来判断。
根据规则所在位置的优先级顺序
对于规则所在的不同位置，可以按照优先级从高到低排列如下：
[list]
[*]在 HTML 文档的 head元素中的 style元素中定义的规则。
[*]通过 style元素中的 @import语句引入的样式表中定义的规则。
[*]通过 link元素引入的样式表中定义的规则。
[*]在 link元素引入的样式表中，再通过 @import语句引入的样式表中定义的规则。
[*]最终用户提供的样式表中定义的规则。
[*]浏览器默认提供的规则。
[/list]
如果规则所在的位置相同的话，出现在样式表后面的规则的优先级更高。
[color=darkred][b]注意:[/b][/color] 对于上面提到的两套规则机制，一个重要的例外就是用户样式表中的包含的带 !important的声明具有最高的优先级，超过网站本身提供的样式表中带 !important声明的规则。这样设计的意图是允许用户使用自己提供的样式来覆盖网站提供的样式，以提高网站的可访问性。
[size=x-large]选择器和声明[/size]
选择器（selector）定义了一种模式匹配规则，用来选择当前文档中的元素。符合规则的元素将被应用上与该选择器对应的样式声明。CSS 提供了一些基本的选择器。基本的选择器也可以进行组合，形成复杂的表达式。基本选择器的具体说明如下：
[list]
[*]通用选择器（*）：匹配文档中的任意元素。
[*]元素类型选择器：匹配文档中的某类元素。如 span匹配文档中所有的 span元素。
[*]后代选择器：匹配作为特定元素的后代出现的元素。比如 div span匹配包含在 div元素中的 span元素。
[*]直接后代选择器：匹配作为特定元素的直接后代出现的元素。比如 div > span匹配父节点是 div元素的 span元素。
[*]相邻兄弟元素选择器：匹配与特定元素有相同父节点，并且直接出现在该元素后面的元素。比如 div + span匹配与 div元素父节点相同，并且直接出现在 div元素之后的 span元素。
[*]属性选择器：匹配属性值满足某些条件的元素。如 div[title]匹配有 title属性的 div元素；div[title=Header]匹配 title属性的值为 Header的 div元素。
[*]类选择器：匹配包含某个 CSS 类的元素。如 .header匹配包含了 CSS 类 header的元素。类选择器实际上是属性选择器的一种，是根据属性 class的值来进行选择的。
[*]ID 选择器：匹配指定 ID 属性值的元素。如 #myDiv匹配 ID 为 myDiv的元素。
[*]伪元素和伪类选择器：匹配一些无法根据其在文档树中的位置来定位的元素。常用的伪元素选择器有：:first-line匹配段落中的第一行；:first-letter匹配块中第一行的第一个字母。常用的伪类选择器有：:link和 :visited分别匹配没有访问过的和已经访问过的链接；:hover匹配当前鼠标悬浮其上的元素；:active匹配当前被用户**的元素；:focus匹配当前有输入焦点的元素。
[/list]
声明是 CSS 中样式属性的名值对，其形式是“属性名称 : 属性值”。如声明“font-color : red”把样式 font-color的值设为 red。
[size=large]属性继承[/size]
对于 CSS 中的某些样式属性来说，如果元素没有显式的指定一个值，该属性就会继承该元素的父元素的这个属性的值。常见的会被继承的属性有：visibility、color、font和 text-decoration等。需要注意的是，发生属性继承的时候，子元素继承的是父元素属性的计算值，而不是指定值。比较典型的例子是通过 em或是百分数指定的字体大小。比如父元素的字体大小的声明是“font-size : 1.2em”，而实际计算出来的字体大小是 12px，则子元素继承的是 12px，而不是 1.2em。通过设置属性的值为 inherit可以让该属性强制继承其父元素对应属性的值。
[size=x-large]CSS 规则的层叠顺序[/size]
正如 CSS 的全称“层叠式样式表（Cascading Style Sheets）”所表示的含义一样，CSS 中的样式声明规则是有层叠顺序的。可以在不同的地方把相同的规则应用在相同的元素上面。比如对某个 P 元素，某条 CSS 规则将其文本颜色设为红色，而另外一个规则把其文本颜色设为蓝色。显然这两条规则是互相冲突的。在具体显示的时候，浏览器会根据层叠顺序来判断应用哪条规则，从而确定该 P 元素的文本颜色。层叠顺序的基本原则很简单，那就是越具体的规则，优先级越高。浏览器根据优先级高低来确定应用哪条规则。具体的来说，一条规则的优先级与其使用的选择器和所在的位置相关。下面分别进行说明。
根据所使用选择器的优先级顺序
在判断一条规则的优先级时，会首先判断其所用的选择器的优先级顺序。按照优先级从高到低的顺序排列如下：
[list]
[*]使用了 !important声明的规则。
[*]内嵌在 HTML 元素的 style属性里面的声明。
[*]使用了 ID 选择器的规则。
[*]使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
[*]使用了元素选择器的规则。
[*]只包含一个通用选择器的规则。
[/list]
当浏览器需要判断应用互相冲突的规则中的哪条规则的时候，首先会根据上面的顺序来判断优先级。优先级高的规则就会被应用。如果优先级相同，则需要进一步判断所使用的选择器的个数。选择器数目较多的规则优先级较高。比如下面两条规则：#myDiv .header .main {}和 #myDiv .header span {}，前者的优先级更高。因为前者有一个 ID 选择器，两个类选择器；而后者也有一个 ID 选择器，但是只有一个类选择器。上述的优先级判断算法类似于一般的数字大小比较，首先比较最高位，如果相同的话，再比较次高位，以此类推。
如果按照上面的优先级顺序来判断，规则的优先级相同的话（即所用的选择器类别相同，同类选择器的数量也相同），则需要进一步根据规则所在的位置来判断。
根据规则所在位置的优先级顺序
对于规则所在的不同位置，可以按照优先级从高到低排列如下：
[list]
[*]在 HTML 文档的 head元素中的 style元素中定义的规则。
[*]通过 style元素中的 @import语句引入的样式表中定义的规则。
[*]通过 link元素引入的样式表中定义的规则。
[*]在 link元素引入的样式表中，再通过 @import语句引入的样式表中定义的规则。
[*]最终用户提供的样式表中定义的规则。
[*]浏览器默认提供的规则。
[/list]
如果规则所在的位置相同的话，出现在样式表后面的规则的优先级更高。
[color=darkred][b]注意:[/b][/color] 对于上面提到的两套规则机制，一个重要的例外就是用户样式表中的包含的带 !important的声明具有最高的优先级，超过网站本身提供的样式表中带 !important声明的规则。这样设计的意图是允许用户使用自己提供的样式来覆盖网站提供的样式，以提高网站的可访问性。
<style>
* { color : black; }
p { color : gray; }
.p_red{ color : red; }
p.p_blue { color : red; }
#p1 { color : green; }
.p_blue { color : blue; }
.p_blue2 { color : blue !important;}
</style>
<body>
<p id="p1" class="p_red"> 示例文本 1</p>
<p class="p_red"> 示例文本 2</p>
<p class="p_blue"> 示例文本 3</p>
<p class="p_blue p_blue2"> 示例文本 4</p>
</body>