CSS选择器优先级

CSS样式选择器分为4个等级，a、b、c、d，可以以这四种等级为依据确定CSS选择器的优先级。


1.如果样式是行内样式（通过Style=””定义），那么a=1
2.b为ID选择器的总数
3.c为Class类选择器的数量。
4.d为类型选择器的数量
5.属性选择器，伪类选择器和class类选择器优先级一样，伪元素选择器和类型选择器一样
6.!important 权重最高，比 inline style 还要高

 

 

例如：

 

选择器

特殊性(a,b,c,d)

Style=””

1,0,0,0

#wrapper #content {}

0,2,0,0

#content .datePosted {}

0,1,1,0

div#content {}

0,1,0,1

#content p {}

0,1,0,1

#content {}

0,1,0,0

p.comment .dateposted {}

0,0,2,1

div.comment p {}

0,0,1,2

.comment p {}

0,0,1,1

p.comment {}

0,0,1,1

.comment {}

0,0,1,0

div p {}

0,0,0,2

p {}

0,0,0,1

 

本日志由 ceiling 于 2010-06-05 11:49:00 发表到 网页设计CSS 中，目前已经被浏览 181 次，评论 0 次；

首页只显示了部分日志内容，要查看日志的全部内容请阅读全文；

DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！

所有浏览器 通用
height: 100px;

IE6 专用
_height: 100px;

IE6 专用
*height: 100px;

IE7 专用
*+height: 100px;

IE7、FF 共用
height: 100px !important;

本日志由 ceiling 于 2010-03-03 21:08:31 发表到 网页设计CSS 中，目前已经被浏览 125 次，评论 0 次；

首页只显示了部分日志内容，要查看日志的全部内容请阅读全文；

ie firefox兼容

1、IE与Firefox下对CSS解析的区别,这是我在使用中的一些经验，拿出来和大家分享，希望大家继续

对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。

结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用

结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用

本日志由 ceiling 于 2009-09-11 00:12:10 发表到 网页设计CSS 中，目前已经被浏览 144 次，评论 0 次；

首页只显示了部分日志内容，要查看日志的全部内容请阅读全文；

兼容IE和FireFox的CSS阴影


阴影效果XML/HTML代码

本日志由 ceiling 于 2009-07-31 01:41:05 发表到 网页设计CSS 中，目前已经被浏览 326 次，评论 0 次；

首页只显示了部分日志内容，要查看日志的全部内容请阅读全文；

让DIV层浮在FLASH上面
     以下为引用的内容：
<div class="top_flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="250">
    <param name="movie" value="images/swf/top.swf" />
<param name="wmode" value="Opaque">
    <param name="quality" value="high" />
    <embed src="images/swf/top.swf" quality="high" wmode="Opaque" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="250"></embed>
  </object></div>
<div class="top_bar"><p class="text">欢迎您，您是第 <em>2009</em> 位访问者
<b>2009年1月14日</b></p></div>在正确写了DIV的定位之后，加上<param name="wmode" value="Opaque"> 和 wmode="Opaque" 就可以通吃浏览器，兼容IE和FIREFOX。让DIV层浮在FLASH上面。

本日志由 ceiling 于 2009-05-07 20:30:29 发表到 网页设计CSS 中，目前已经被浏览 455 次，评论 0 次；

作者添加了以下标签： css；

121/3