精通CSS读书笔记 (第二章 为样式找到应用目标)

第二章 为样式找到应用目标

常用选择器

类型选择器和后代选择器
伪类选择器(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
精通CSS读书笔记 (第二章 为样式找到应用目标)_第1张图片

在样式表中使用特性

尽量保持一般的一般,特殊的特殊。

在主体标签上添加类或ID
body.news{

}
body#archive{

}
<body id="archive" class="news">
	<p>some wordsp>
body>
继承

继承而来的特殊性为空。

规划组织和维护样式表
对文档应用样式

link和@import,导入比链接要慢

<link href="/css/base.css" ref="stylesheet" type="text/css" />
@import url(/css/base.css)

浏览器只能从同一个域下载有限的文件,所以结构良好的单一文件可以提高速度。

设计代码结构

  • 一般性样式:主体样式,reset样式,链接,标题,其他元素
  • 辅助样式:表单,通知和错误,一致的条目
  • 页面结构:标题、页脚和导航,布局,其他页面结构元素
  • 页面组件:各个页面
  • 覆盖

自我提示
@todo未完成
@bugfix待修复
@workaround权宜之计

删除注释和优化样式表

样式指南

可以是文档、网页、小站点,解释代码和视觉设计是如何组合在一起的。
动态样式指南——“模式组合”。

你可能感兴趣的:(精通CSS,精通CSS)