第二章 为样式找到应用目标
常用选择器
类型选择器和后代选择器
伪类选择器(e.g. xxx:hover)
通用选择器
ID选择器和类选择器
高级选择器
后代选择器 a>b
相邻同胞选择器 a + b
属性选择器 a[b] / a[b=“xxx”] / a[b~=“xxx”]
层叠和特殊性
层叠采用的重要次序:
1、有!important的用户样式
2、有!important的作者样式
3、作者样式
4、用户样式
5、浏览器或用户代理应用的样式
若重要次序相同,则后定的优先。
特殊性
其计算不是以10为基数的,而是以一个更高的未指定的基数。但是为了简化,在不特定选择器超过10个时,我们使用10为基数计算。
把特殊性等级分为4个:a,b,c,d
1、如果样式是行内样式,a=1
2、ID选择器的总数是b
3、类选择器、伪类选择器、属性选择器总数是c
4、类型选择器和伪元素选择器的总数是d
在样式表中使用特性
尽量保持一般的一般,特殊的特殊。
在主体标签上添加类或ID
body.news{
}
body#archive{
}
<body id="archive" class="news">
<p>some words</p>
</body>
继承
继承而来的特殊性为空。
规划组织和维护样式表
对文档应用样式
link和@import,导入比链接要慢
<link href="/css/base.css" ref="stylesheet" type="text/css" />
@import url(/css/base.css)
<!--import还可以导入css文件中-->
浏览器只能从同一个域下载有限的文件,所以结构良好的单一文件可以提高速度。
设计代码结构
- 一般性样式:主体样式,reset样式,链接,标题,其他元素
- 辅助样式:表单,通知和错误,一致的条目
- 页面结构:标题、页脚和导航,布局,其他页面结构元素
- 页面组件:各个页面
- 覆盖
自我提示
@todo未完成
@bugfix待修复
@workaround权宜之计
删除注释和优化样式表
样式指南
可以是文档、网页、小站点,解释代码和视觉设计是如何组合在一起的。
动态样式指南——“模式组合”。