07 CSS进阶讲解.ppt

4. 复合选择器的优先级 复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是“ID选择器 类选择器 标记选择器”，所以不妨设ID选择器的优先级权重是100，类选择器的优先级权重是10，标记选择器的优先级权重是1，那么复合选择器的优先级就是组成它的各个选择器权重值的和。 h1{color:red;} /* 权重=1 */ p em{color:blue;} /* 权重=2 */ .warning{color:yellow;} /* 权重=10 */ p.note em.dark{color:gray;} /* 权重=22 */ #main{color:black;} /* 权重=100 */ 当权重值一样时，会采用“层叠原则”，一般后定义的会被应用 复合选择器优先级计算 例题 style type=text/css #aa ul li { color:red } .aa { color:blue } /style div id=aa ul li class=aa web常见问题大全之em class=aa复合选择器 /em的优先级 /li /ul /div 复杂选择器名称的分解 如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如： #menu a.class:hover b, .special b.class { … } 就可先分解为： （#menu a.class:hover b），（.special b.class） 这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。 CSS样式的总体设计原则 定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的后代选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。 例如导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menu a）就可以选中导航条内的各个a标记了。 CSS样式的总体设计原则2 对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。 CSS 2.1新增加的选择器简介 CSS 2.1新增加的选择器简介 CSS 2.1标准在1.0的基础上增加了一些新的选择器，这些选择器不能被IE6浏览器支持，但是其他浏览器如IE 7、Firefox3、Safari 4等均对它们提供支持。 考虑到目前越来越多的电脑安装了IE 7等新型浏览器，因此我们有必要知道这些新选择器，它们能给CSS设计带来方便，而且对我们以后学习jQuery的选择器是很有帮助的。 1. 子选择器 子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（） bodyp { color: green; } body p这一段文字是绿色/p divp这一段文字不是绿色/p/div p这一段文字是绿色/p /body 测试: 子选择器 使用子选择器招数（Hack）对IE 5-6/Win 隐藏透明的背景PNG图象。 htmlbody {?? background-image:(bg.png)} pb{ color:red } 2 相邻选择器 相邻（adjacent-sibling）选择器的定义符号是加号（+），相邻选择器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素） h2+p { color: red; } h2下面哪些文字是红色的呢/h2 p这一段文字是红色/p p这一段文字不是红色/p h2下面有文字是红色的吗/h2 divp这一段文字不是红色/p/div p这一段文字不是红色/p h2下面哪些文字是红色的呢/h2 这一段文字不是红色 p这一段文字是红色/p p这一段文字不是的/p 3 属性选择器 （1）匹配属性 a[name] {color:purple; } img[border] {border-color:gray;} [special] {color:red;} （2）匹配属性和值 input[type=submit] {background:purple; } （3）匹配单个属性值 h2[class~