读《精通css》--第二章基础知识

Posted 2020-07-23

一. 常用的选择器：类型选择器和后代选择器、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）删除注释和优化样式表