CSS工作原理
关于CSS规则如何为HTML添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。
剖析CSS规则
添加CSS样式的方法
主要有三种：
行内样式：写在特定HTML标签的style属性里
嵌入样式：将CSS样式放在HTML文档的head元素中
链接样式：用link标签引入外部css文件
另，样式表中链接其他样式的方法：@import url(css/styles2.css)
CSS规则命名惯例
第一种方法：多个声明包含在一条规则里。
第二种方法：多个选择符组合在一起。
第三种方法：多条规则应用给一个选择符。
所有用于选择特定元素的选择符又分三种：
上下文选择符：基于祖先或同胞元素选择一个元素
ID和类选择符：基于id和class属性的值选择元素
属性选择符：基于属性的有无和特征选择元素
上下文选择符
格式：
其中，标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。
特殊的上下文选择符
子选择符
格式：
注意：标签2必须是标签1的子元素。
紧邻同胞选择符
格式：
标签2必须紧跟在其同胞标签1的后面。
一般同胞选择符
格式：
标签2必须跟（不一定紧跟）在其同胞标签1后面。
通用选择符
通用选择符*是一个通配符，它匹配任何元素。
例如：
会把p包含的所有元素的文本变成绿色。 注：所有子元素文本变成绿色，但p标签的文本不变色。
如果通配符前面没有标签，则表示网页所有元素。
ID和类选择符
类属性
body标签中包含的任何HTML元素都可以添加class属性。
类选择符
格式：
标签带类选择符
格式：
多类选择符
可以给元素添加多个类：class="class1 class2"。
格式：
不要乱用类 不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的CSS量。
ID属性
格式：
用于页内导航的ID：（俗称锚点） 例如下面这个链接，其目标是同一页的另一个位置：
若只有“#”，那么点击链接会返回页面顶部。如果没有“#”，浏览器就会尝试加载bio目录下的默认页面了。 另外，如果你暂时不知道某个href应该放什么URL，也可以用#作为占位符，但不能把该属性留空。因为href属性值为空的链接的行为跟正常链接不一样。这样团队中其他人将来可以用中间层（比如PHP）变量替换#，以便动态接收来自数据库的URL。
属性选择符
属性名选择符
格式：
例如：img[title]{border:2px solid blue;}，带有title属性的img标签会被选择。
属性值选择符
格式：
选择任何带有值为属性值的属性名的标签名。
伪类
伪类分为两种：
UI伪类，会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
结构和伪类，会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。
使用方法：冒号“:”表示伪类，两个冒号“::”表示CSS3新增的伪元素。
UI伪类
链接伪类
link：默认。
visited：用户此前点击过这个链接
hover：鼠标指针正悬停在链接上
active：链接正在被点击（鼠标在元素上按下，还没有释放） 注意：由于这4个伪类的特指度相同，所以必须按照顺序使用。
:focus伪类 表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。
:target伪类 例如下面例子，CSS规则：#more_info:target{background:#eee;}，会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
结构化伪类
常见的结构化伪类：
:first-child和:last-child
:nth-child 例如：li:nth-child(3)会选择一组列表项中的每个第三项。 注意：是li！！！不是ul！！！
伪元素
常见的伪元素：
::first-letter伪元素 例如：p::first-letter{font-size: 300%;}，可以得到段落首字符放大的效果。
::first-line伪元素 可以选中文本段落的第一行。
::before和::after伪元素 用于在特定定元素前面或后面添加特殊内容。 例如给
<p class="age">25</p>添加一下标签会得到：Age：25 years.
继承
CSS中的祖先元素会向后代传递一样东西：CSS属性的值。 例如：
Last updated