css(一)

CSS3的快速编辑解决方案

　　由于CSS3是一个新标准，大部分浏览器并没有把完全的并用标准属性去实现这些方法，很多都需要加上各个浏览器的专属私有前缀。对于开发者来说一遍一遍的写各个浏览器的私有前缀是一件很痛苦的事情！！一个叫prefixfree.js 的东西当你在开发的时候引入该文件就可以肆无忌惮的无视掉私有前缀这个东西，它会帮助我们对每个css3属性添加对应的私有前缀以获得正确的效果。但是该方案也有局限性，当我们并不想让某个浏览器实现某个功能的时候，它却没有按照我们的想法去做！要用的适当。

　　

column layout 多列布局..

　　包含属性：

　　　　column-count　　列数　　　　　　　　　　　　　　　　　　 column-width　　列的宽度

　　　　column-span　　横跨的列数（默认是1 Ie Ff 不支持）　　　　 column-rule　　  列的右边框样式

　　　　column-gap　 　列与列之间的距离　　　　　　　　　　　　　column-fill　　   定义了栏目的高度是否统一，其值有auto | balance

　　　　

文字折行

element{
    overflow:hidden;
    word-wrap:break-word;
}

　　强制不换行

element{
    white-space:nowrap;
    word-break:keep-all;
}

　　在表格中以上方法好像不适用

 table{
        table-layout:fixed;
        width:xxxpx;
    }
    td{
        overflow:hidden;
        word-wrap:break-word;
    }

 

CSS 选择器

　　CSS中有很多中选择的方式

　　　　1.元素选择符

　　　　　　*{}　　NODE{}　　NODE.class{}　　NODE#id{}

　　　　2.关系选择符

　　　　　　N1 N2{}  选择N1中德所有被N1包含的N2元素　　　　N1>N2    选择N1中的所有N2子元素

　　　　　　N1 + N2  紧贴在N1元素之后的N2元素　　　　　　　 N1 ~ N2   选择所有N1元素的兄弟元素N2

　　　　3.属性选择符

　　　　　　N[attr]　　　　　　N中具有attr属性的元素　　　　　　　　　N[attr="val"]　　N中attr属性存在并且等于val的元素

　　　　　　N[attr~="val"]　　N中具有attr属性并且多个值中包含val　　  N[attr^="val"]　 N中attr属性存在并且以val开头的元素

　　　　　　N[attr$="val"]　　以val结尾的

　　　　　　N[attr*="val"]　　存在val的

　　　　　　N[attr|="val"]　　以val开头并且带-的 val-

　　　　4.伪类选择符

　　　　　　这个就有很多了~常用的一些

　　　　　　　　N:hover　　N:active　　N:link　　N:visited　　N:focus　　N:first-child

　　　　　　CSS3中增加的

E:not()	CSS3	匹配不含有s选择符的元素E。
E:root()	CSS3	匹配E元素在文档的根元素。
E:last-child()	CSS3	匹配父元素的最后一个子元素E。
E:only-child()	CSS3	匹配父元素仅有的一个子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n个子元素E。  从1开始计算节点数
E:nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E。
E:first-of-type	CSS3	匹配同类型中的第一个同级兄弟元素E。
E:last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type	CSS3	匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type	CSS3	匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E。
E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E。
E:checked	CSS3	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled	CSS3	匹配用户界面上处于可用状态的元素E。
E:disabled	CSS3	匹配用户界面上处于禁用状态的元素E。
E:target	CSS3	匹配相关URL指向的E元素。