标签：
1 什么是CSS?
CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言。
2 为何使用CSS?
CSS 文档信息的内容和如何展现它的细节想分离，文档细节即为样式（style）。你可以将样式与内容进行分离出来，以便我们能够
3 CSS 如何工作的?
浏览器在展示一个文档内容的时候，必须要把文档和样式信息结合起来展示。这个处理过程一般分为两个阶段：
1 浏览器先将标记语言和CSS转换成DOM（文档对象模型）结构。这时DOM就代表了电脑内存中的相应文档，因为它已经融合文档结构和样式表
2 最后浏览器把DOM的内容展示出来。
4 层叠和继承？
一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试
对于层叠来说，共哟三种主要的样式来源
5 选择器（Selectors）
| 选择器 | 选择的元素 |
A E |
任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
A > E |
任何元素A的子元素 |
E:first-child |
任何元素的第一个子元素E |
B + E |
任何元素B的下一个兄弟元素E |
B ~ E |
B元素后面的拥有共同父元素的兄弟元素E |
提示：请使用
:link 选择器对指向未被访问页面的链接设置样式,
:visited 选择器用于选取已被访问的链接。
:hover 选择器用于设置鼠标指针浮动到链接上时的样式
:active选择器用于设置点击链接时的样式
其四种分别表示：链接 访问过的链接 悬浮在连接上 访问时（点击链接时）
:focus 表示元素获取焦点的
兼容性：
| Chrome | Firefox | Internet | Oper | Safari |
| 1.0 | 1.0 | 8.0 | 7.0 | 1.0 |
修饰表单元素状态：
:checked，:enabled，:disabled
:checked 被选中时
:enabled 可用状态
:disabled 无效状态
enabled 表示任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。元素还有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点。
:target
目标元素一般配合a链接使用，利用其锚点功能，表示当前锚点指向的目标对象
:empty
表示没有内容的元素，例如 <hr/> <br/>
:first-child
第一个子元素
:nth-child()
从开始位置选择指定位置的子元素
:nth-child(2) { color: red; } <div> <p>111111</p> <p>111111</p> //变红 <p>111111</p> <p>111111</p> </div>
:nth-last-child()
从结束为止开始选择制定子元素
:nth-last-child(2) { color: red; } <div> <p>111111</p> <p>111111</p> <p>111111</p> //变红 <p>111111</p> </div>
:nth-of-type()
根据类型 当没有指定具体类型时，则全文查找相同类型的指定位置的元素给其添加样式
<style> :nth-of-type(4){ color:red; } </style> <a href="#d">aaaa</a> <a href="#d">aaaa</a> <a href="#d">aaaa</a> <a href="#d">aaaa</a> //变红 <div> <div> 111111111111 </div> <div> 111111111111 </div> <div> 111111111111 </div> <div> 111111111111 </div> //变红 </div>
也可以指定类型
div:nth-of-type(4){ color:red; } <a href="#d">aaaa</a> <a href="#d">aaaa</a> <a href="#d">aaaa</a> <a href="#d">aaaa</a> <div> <div> 111111111111 </div> <div> 111111111111 </div> <div > 111111111111 </div> <div > 111111111111 //变红 </div> </div>
也可以指定范围（也就是父元素），例如下
.parent div:nth-of-type(4) { color: red; } <div> 111111111111 </div> <div> 111111111111 </div> <div> 111111111111 </div> </div> <div> 111111111111 </div> <div class="parent"> <div> 111111111111 </div> <div> 111111111111 </div> <div> 111111111111 </div> <div> 111111111111 </div> </div>
:first-of-type
选择第一个子元素，这与frist-child 区别在于可以进行类型
:first-child { color: red; } <p>111111</p> <p> <span>111</span> </p> <div> <p>111111</p> </div> 或 :first-of-type{ color: red; } <p>111111</p> <p> <span>111</span> </p> <div> <p>111111</p> </div>
:last-of-type 先筛选例如先找出所有的兄弟节点p元素，再选择最后一个p元素
p:last-of-type{ color: red; } <p>111111</p> <p> <span>111</span> </p> <div> <p>111111</p> //变红 </div> <p> <span>111</span> //变红 </p>
//再看看这样的也行
p:last-of-type{ color: red;
} <p>111111</p> <p> <span>111</span> </p>
<p>
<span>111</span> //变红 </p>
<div> <p>111111</p> //变红 </div>
而last-child不进行筛选，只有满足是父元素中并且是最后一个
p:last-child{ color: red; } <p>111111</p> <p> <span>111</span> </p> <div> <p>111111</p> //变红 </div> <p> <span>111</span> //变红 </p> 或者 p:last-child{ color: red; } <p>111111</p> <p> <span>111</span> </p> <p> <span>111</span> //不变红 </p> <div> <p>111111</p> //变红 </div>
标签：
原文地址：http://www.cnblogs.com/czhyuwj/p/5450817.html
