为样式找到应用目标
- 常用选择器
- 高级选择器
- 特殊性和重叠的作用
- 计划和维护样式表
- 如何在代码中添加注释
1.常用选择器：
》类型选择器(元素选择器/简单选择器)： p、h1
》 后代选择器：两个选择器间空格
》ID选择器：#
》类选择器：.
———————————以上4中选择器的组合可以成功找到很多元素————————————
》伪类：(冒号):
:link和:visited成为链接伪类，只能应用于锚元素；
:hover、:active和:focus成为动态伪类，理论上可以应用于任何元素。
>可以根据文档结构之外的其他条件对元素应用样式。
>而且通过把伪类链接在一起，可以创建复杂的行为，如以访问的链接和未访问的链接上实现不同的鼠标悬停效果。
a:visited:hover { color: olive; }
》通用选择器：*
2.高级选择器：
》子选择器：>
后代选择器选择一个元素的所有后代，子选择器只选择元素的直接后代
》相邻同胞选择器：+
定位同一个父元素下某个元素之后的元素，如下，h2 + p，会见h2和第一个p设置样式。
h2 + p {}
<h2></h2>
<p></p>
<p></p>
》属性选择器：详见另一篇文章http://www.cnblogs.com/congyue-pepsi/p/5672815.html
3. 层叠和特殊性：
优先级：
标有!important的用户样式
标有!important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式。
如果两个规则的优先级相同，以后定义为主
特殊性计算：
选择器的特殊性分成4个成分等级： a/b/c/d
》如果样式是行内样式，那么a=1 (style="")
》b等于ID选择器的总是
》c等于类、伪类和属性选择器的数量
》d等于类型选择器和伪元素选择器的数量
如： #c #d .e {} 0210->210
4. 设计CSS代码的结构：
一般性样式： @group general styles
- 主题样式
- reset样式
- 链接
- 标题
- 其它元素
辅助样式： @group helper styles
- 表单
- 通知和错误
- 一致的条目
页面结构： @group page structure
- 标题、页脚和导航
- 布局
- 其他页面结构元素
页面组件： @group page components
- 各个页面
覆盖 @group overrides