CSS复合选择器
1.标签指定选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。
<html>3
<head>
<meta>
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{color:blue;}
.special{color:green;}
p.special{color:red;}/*标签指定式选择器*/
</style>
<body>
<p>普通段落文本</p>
<p class="special">指定了，special类的段落文本（红色）</p>
<h3 class="special">指定了.special的类的标题（绿色）</h3>
<body>
</html>
2.后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前边，内层标记写在后边，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
<html>
<head>
<meta>
<title>后代选择器</title>
<style type="text/css">
p strong{color:red;} /*后代选择器*/
strong{color:blue;}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）。</strong></p>
<strong>嵌套之外由</strong>
</body>
</html>
3.并集选择器
并集选择器时各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class选择器、id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同、或部分相同，就可以利用并集选择器为他们定义颜色相同的css样式。
<html>
<head>
<meta>
<style type="text/css">
h2,h3,p{color:red;font-size:14px;}/*不同标记组成的选择器*/
h3,special,#one{text-decoration:underline;}/*标记、类、id组成的并集选择器*/
</style>
<body>
<h2>二级标题文本</h2>
<h3>三级标题文本加下划线</h3>
<p class="special">段落文本1，加下划线</p>
<p>段落二，普通文本</p>
<p id="one">段落三，加下划线</p>
</body>
</html>
CSS层叠性和继承性
CSS是层叠样式的简称，层叠性和继承性是其基本特征。
1.层叠性
所谓层叠性是指多种CSS样式的叠加，代码如下：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transistional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chareat=utf-8" />
<title>CSS层叠性</title>
<style typr="text/css">
p{ font-size:12 px; font-family:"微软雅黑";}
.special{font-size:16px;}
#one{color:red;}
</style>
</head>
<body>
<p class="special" id="one">段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
</body>
</html>
2.继承性
所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。例如，定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他的标记都嵌套在标记的子标记。
继承性非常有用，它使设计师不必在元素的每个后代上添加相同的样式。如果设置的属性是一个可继承的属性，只需将其应用于父元素即可。例如：
p,div,h1,h2,h3,h4,ul,ol,dl,li{ color:black;}
可以写成：
body{ color:black;}
第二种写法可以达到相同的控制效果，且代码更简洁。
恰当的使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继续影响文档中所有的文本。
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：
1.边框属性
2.外边距属性
3.背景属性
4.定位属性
5.布局属性
6.元素宽高属性
CSS优先级
为了体验CSS优先级，首先看一个具体的例子，其CSS样式代码如下：
p{color:red;} /*标记样式*/
.blue{color:green;} /*class样式*/
#header{ color:blue;} /*id样式*/
对应的HTML结构为：
<p id="header"class="blue">
帮帮我，我到底是什么颜色？
</p>
在上面的例子中，使用不同的选择器对同一个元素设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。其实，CSS为每一种基础选择器都分配了一个权重，其中，标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100.这样，id选择器#header就具有最大优先级，因此文本显示为蓝色。
对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器选择器权重的叠加，例如下面的CSS代码：
p strong{color:black} /*权重为1+1*/
strong.blue{color:green;} /*权重为：1+10*/
.father strong{color:yellow} /*权重为：10+1*/
p.father strong{color:orange;} /*权重为：1+10+1*/
p.father .blue{color:gold;} /*权重为：1+10+10*/
#header strong{color:pink;} /*权重为：100+1*/
#header strong.blue{color:red;} /*权重为：100+1+10*/
对应的HTML结构为：
<p class="father" id="header">
<strong class="blue">文本的颜色</strong>
</p>
【1.继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0.也就是说子元素定义的样式会覆盖继承来的样式。]例如下面的CSS代码：
strong{color:red;}
#header{color:green;}
对应的HTML结构为：
<p id="header" class="blue">
<strong>继承样式不如自己定义</strong>
</p>
【2.行内式优先。应用style属性的元素，其行内式的权重非常高，可以理解为远大于100.总之，它拥有比上面提高的选择器都大于的优先级。】
【3.权重相同时，CSS遵循就近原则。也就是说，靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。例如：
/*CSS文档，文件名为style.css*/
#header{color:red;}*/
对应的HTML结构为：
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transistional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chareat=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="style.css" type="text/css"/><!--链入式外部样式表-->
<style typr="text/css">
#header{color:gray；}
</style>
<body>
<p id="header">权重相同时，就近有先</p>
</body>
</html>
【4.CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，！important都具有最大的优先级。】
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
