CSS——读书笔记-02-选择器

为样式找到应用目标

• 经常使用选择器
• 高级选择器
• 特殊性和重叠的做用
• 计划和维护样式表
• 如何在代码中添加注释

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