css2.1权重(specificity)IE6/7下一些错误规则

关于CSS specificity
CSS 的specificity (权重),它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。
选择符Specificity值列表:

Selectors
选择符
Syntax Samples
语法
ensample
示例
Specificity
特性
通配选择符(Universal Selector) * *{ width:560px;} 0,0,0,0
类型选择符(Type Selectors) E1 td { font-size:12px;} 0,0,0,1
伪元素选择符(pseudo-element Selectors) :first-line :first-line{ font-size:12px;} 0,0,0,1
伪类选择符(Pseudo-classes Selectors) :link :link { font-size:12px;} 0,0,1,0
属性选择符(Attribute Selectors) [attr] [title] {color:blue;} 0,0,1,0
ID选择符(ID Selectors) #ID #test{ font-size:12px;} 0,1,0,0
类选择符(Class Selectors) E1.className .test{color:blue;} 0,0,1,0
子对象选择符(Child Selectors) E1 > E2 body > p {color:blue;} E1+E2
相邻选择符(Adjacent Sibling Selectors) E1 + E2 div + p {color:blue;} E1+E2
选择符分组(Grouping) E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3
包含选择符(Descendant Selectors) E1 E2 table td {color:blue;} E1+E2

更多内容

固定宽度的文字自动换行并垂直剧中

直接上代码

.box {
    position: relative;
    width: 500px;
    height: 300px;
    border: 1px solid #FFF;
    background-color: #999;
    display: table;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    *position:absolute;
    * top: 50%;
    * left: 0;
}

.content { *position:relative;
    * top: -50%;
    * left: 0;
}

 

        <div class="box">
            <div class="wrap">
                <p class="content">
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                    <a href="http://www.xiaoqiang.org/css/text-wrap-and-vertical-align-center.html" title="固定宽度的文字自动换行并垂直剧中">固定宽度的文字自动换行并垂直剧中</a>
                </p>
            </div>
        </div>
        <div class="box">

            <div class="wrap">
                <p class="content">
                    是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行
                </p>
            </div>
        </div>

试试看:固定宽度的文字自动换行并垂直剧中

2011.10.10更新,参照http://sofish.de/1909修正IE7bug

font简写规则

看到一个阿里的考题,仔细查了下font的缩写规则。有点特殊,所以总结了一下。
CSS 2.1 Specification关于font的值定义如下:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <’font-size’> [ / <'line-height'> ]? <’font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

其中”|”表示2个或者多个属性里面必须选一个。”||”表示2个或者多个属性里面必须选1个或者多个。”?”表示前面的属性可以选或者不选”[]“为分组标记。
根据这个规则:
A=[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?这三个属性可以不选或者多个+<’font-size’>必选项+[ / <'line-height'> ]? 可以选或者不选+<’font-family’>必选;
A | caption | icon | menu | message-box | small-caption | status-bar | inherit
其中写上一个。
由于写后面的属性都是浏览器自带的样式,一般不能满足我们的需求,所以大部分还是选择A
A的缩写规则,最简短就是留下两个必须项:font-size+font-family
还有一个特殊情况就是,如果只简写了,其他属性会被置为默认值:font:normal normal normal font-size/normal font-family;

所以写在font定义之前的font-style,font-variant,font-weight,line-height都会被font默认属性覆盖。

项目中的一些小技巧tips记录

项目中遇到的一些小技巧,记录下来:

  1. 对非a标签添加伪类状态,例如span:hover{}。在采用偷天换日的手法a:hover span{},解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。
  2. 选项卡去掉虚线框,IE解决方案:<a href=”..” hidefocus=”true”>;FF下解决方案:a:focus {outline:none;-moz-outline:none;}
  3. 内联元素居中水平采用父元素text-align:center;垂直采用height=line-height;块级元素水平居中自身margin:0 auto;text-align:left(对子内联元素不入侵)父元素text-align:center;块级元素可以采用text-indent调解左边距,比padding-left的好处在与不会影响固定宽度值
  4. 小图片存为gif文件比png-8要小,但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小,而且今天在蓝色理想看到别人用position做css sprites,还有人提出img sprites的想法,都很不错
  5. 内联元素用display:inline-block;比较给力,IE6下虽然不支持这个属性,但是会触发内联元素的haslayout,所以表象一样。块级元素就不行了
  6. 内联元素float:left;之后按理说应该表现为块级,但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;
  7. IE6下当高度小于font-size的时候,会被撑高。解决方案:font-size:1px;
  8. css在浏览器渲染过程中是从右向左读取的,尽量不用名字空间约束样式名,尽量不对元素直接写样式。