CSS 相关知识总结
1 什么是CSS?
CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言。
2 为何使用CSS?
CSS 文档信息的内容和如何展现它的细节想分离，文档细节即为样式（style）。你可以将样式与内容进行分离出来，以便我们能够
- 避免重复
- 更容易维护
- 为不同的目的，使用不同的样式而内容相同
3 CSS 如何工作的?
浏览器在展示一个文档内容的时候，必须要把文档和样式信息结合起来展示。这个处理过程一般分为两个阶段：
1 浏览器先将标记语言和CSS转换成DOM（文档对象模型）结构。这时DOM就代表了电脑内存中的相应文档，因为它已经融合文档结构和样式表
2 最后浏览器把DOM的内容展示出来。
4 层叠和继承？
一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试
对于层叠来说，共哟三种主要的样式来源
- 浏览器对HTML定义的默认样式
- 用户定义的样式
- 开发者定义的样式，可以有三种形式
-
- 定义在外部的样式（外链样式）：可以达到共用
- 定义在页面头部的样式（内联样式）：通过这种形式定义的样式，只能当前页面使用
- 定义在特定元素身上的（行内样式）：这种形式多用于测试，可维护性差
5 选择器（Selectors）
标签选择器
关系选择器
| 选择器 | 选择的元素 |
A E |
任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
A > E |
任何元素A的子元素 |
E:first-child |
任何元素的第一个子元素E |
B + E |
任何元素B的下一个兄弟元素E |
B ~ E |
B元素后面的拥有共同父元素的兄弟元素E |
类选择器
ID选择器
伪类选择器
- :link
- :visited
- :active
- :hover
- :focus
- :first-child
- :nth-child
- :nth-last-child
- nth-of-type
- :first-of-type
- :last-of-type
- :empty
- :target
- :checked
- :enabled
- :disabled
提示：请使用
: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>
