CSS选择器类型技术总结.ppt

CSS所有的选择器类型总结 复合选择器的优先级计算 复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是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 所以综合来说，元素应用CSS样式的优先级应为 在ie中div.red的优先级大于div .red 复杂选择器名称的分解 如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，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属性的值和单位 CSS属性的值和html属性值的比较 font-size:12px 值是对属性的具体描述，而单位是值的基础。没有单位，浏览器将不知道一个边框是10厘米还是10象素。CSS中较复杂的值和单位有颜色取值和长度单位。 注意：HTML的属性的值一般不要写单位，这是因为html属性的取值可用的单位很少，要么是象素，要么是百分比 table width=768 CSS长度单位 为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。 绝对单位 绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。 由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会根据显示面积按比例调整大小。所以绝对单位很少用。 相对单位 顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。 有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和象素（px）。 em就是元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。 px(像素)：象素指显示器按分辨率分割得到的小点，因为显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于使用象素作为单位。 百分比 百分比显得非常简单，也可看成是一个相对量。如： td{font-size:12px; line-height: 160%; } /*设定段落的行高为字体高度的160% */ hr{ width: 80% } /* 线段长度是相对于浏览器窗口的80% */ 颜色的值 CSS中定义颜色的值可使用命名