精通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
在这里插入图片描述

在样式表中使用特性

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

在主体标签上添加类或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权宜之计

删除注释和优化样式表

样式指南

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值