如何让CSS实现多游览器兼容
http://www.cnblogs.com/rubylouvre/archive/2009/08/10/1542476.html
说是实现兼容,其实也只不过为了照顾IE6与IE7,其实不支持标准的对手早就烟飞灰灭,而像firefox,Opera,Safari等更新换代太快,就算有问题很快就被官方处理。因此这篇博文大家最好在IE6中浏览,里面可运行的例子都是为IE6准备的。
选择器
通配符 * :: IE6不支持
类选择器 .class :: IE6元素的class不能超过2个
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
关系选择器 E + F; E > F ; E ~ F :: IE6不支持
属性选择器 [att=value] [att] [att|=value] [att(^|$|~)=value] :: IE6不支持
:first-letter,:first-line,:visited,:link伪类选择器 :: 都支持
:hover伪类选择器 :: IE6只支持a元素(并且一定要有href属性才行),IE7及FF支持a以外元素
:before和:after伪类选择器 :: IE7和firefox支持
结构伪类选择器 ::只有最新的游览器才支持这种CSS3选择符,FF3.5,opera10与chrome。IE全系列歇菜。
说说用法:
E:root 匹配文档的根元素
1.:root { border: 1px solid blue; }
2.//相当于html { border: 1px solid blue; }
E:nth-child(n) 匹配所有在其父元素中排第n个的E元素。n可以是数字/关键字/公式
1.tr:nth-child(3) { …… } /* 匹配所有表格里面排第3的行<TR> */
2.tr:nth-child(2n+1) { …… } /* 2n+1,公式,匹配所有奇数行 */
3.tr:nth-child(odd) { …… } /* odd:关键字,匹配所有奇数行 */
4.tr:nth-child(2n) { …… } /* 2n:匹配所有偶数行*/
5.tr:nth-child(even) { …… } /* even:关键字,匹配所有偶数行li */
E:nth-last-child(n) 伪类同:nth-child的工作方式非常相似,不过他是从后向前数子节点
1.tr:nth-last-child(3n+3) { background-color: red; }
2.tr:nth-last-child(3n+2) { background-color: green; }
3.tr:nth-last-child(3n+1) { background-color: blue; }
E::nth-of-type(n)伪类使用跟其他伪类类似的语法,但是允许你根据元素类型进行选取。
1.body:nth-of-type(1) p{
2. color: #333333;
3.}
:nth-last-of-type同:nth-of-type功能类似,不过也是从后向前查子节点。
DocType
文档类
相关文档:
1、IE分不清继承关系和父子关系的差别,全部都是继承关系。
2、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。另外提醒您,不要太疯狂了。
3、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深 ......
收藏一份不错的DIV+CSS布局的SEO优化资料:
Div+css命名规则-(能增强SEO?)
页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:l ......
DIV+CSS网页布局:三列浮动中间列宽度自适应
已有 39 次阅读 2009-09-07 14:25 标签: DIV CSS 网页 宽度
使用浮动定位方式,从一列到多列的固定宽度及自适应,基本上可以简单完成,包括三列的固定宽度。而在这里给我们提出了一个新的要 ......
滚动条样式主要涉及到如下CSS属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
width: 568px; width: 98%; 设置区域的 ......