一. 常用的选择器:类型选择器和后代选择器、ID选择器和类选择器、伪类选择器(:link,:visited,:hover,:active,:focus)
二. 通用选择器:* ( 通配符,也可以用来对某个元素的所有后代应用样式)
三. 高级选择器:CSS有向后兼容性,即如果浏览器不理解某个选择器,那么它会忽略整个规则。对于站点功能或布局很重要的任何元素上,都应该避免使用这些高级选择器。
1. 子选择器和相邻同胞选择器:> + (IE6不支持)
2. 属性选择器:根据属性是否存在 或者 属性的值 (IE6不支持)
具体可以查看W3C:http://www.w3school.com.cn/css/css_selector_attribute.asp
3. 层叠和特殊性:
1)层叠的重要度次序:(css样式表)
标有!important的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式
2)特殊性:选择器的特殊性分为四个等级a、b、c、d
如果是行内样式,a=1;
b等于ID选择器的总数;
c等于类、伪类、属性选择器的数量;
d等于类型选择器和伪元素选择器的数量。
总之:尽量保持一般性样式非常一般,特殊样式尽可能特殊,这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式,则从更一般的规则中删除需要覆盖的声明,并应用于需要它的每个元素。
4. 继承:不要将继承和层叠混为一谈!
应用样式的元素的后代会继承样式的某些属性,比如颜色和字号。 直接应用于元素的任何样式总会覆盖继承而来的样式。
继承使开发人员不必在元素的每个后代上添加相同的样式。如果打算设置的属性是继承而来的属性,那么也可以将它应用于父元素。
四. 规划、组织和维护样式表:
1. 对文档应用样式:导入样式表比链接样式表慢
1)设计代码结构:
A. 一般性样式:
主体样式
reset样式
链接
标题
其他元素
B. 辅助样式:
表单
通知和错误
一致的条目
C. 页面结构:
标题、页脚、导航
布局
其他页面结构元素
D. 页面组件
各个页面
E. 覆盖
2)注释风格:
3)自我提示:
a. @todo表示某些东西需要在以后进行修改、修复和复查;
b. @bugfix表示代码或特定浏览器遇到的问题;
c. @workaround表示并不完善的权宜之计。
4)删除注释和优化样式表