前言
以前刚接触css的时候，总觉得一个元素对应着它相应的属性，并且与对应的html文件结合，大概就能出现你想要的漂亮页面把。但在CSS身上，“事与愿违”简直就是新手对它的代名词。
在css的世界里，不管是前端老手，还是资质尚浅的前端新手，都一定会犯“只知其一不知其二”这样的错误。以此，CSS也常被戏称为“不是科学，是艺术”。
要知道，“只知其一不知其二”这种错误真的是致命的，因为你永远不知道你明明检查了几万遍的正确的元素属性，到底是哪里出错了。所以在学习CSS之前，请先看一下方应杭老师回答的这篇，你就会对接下来学习CSS语法有更多的心理准备。
CSS那么难学竟然是因为它“不正交”：
为什么 CSS 这么难学？
这里先搞清楚几个基本概念：
标签、元素、属性，有很多人会搞不清出哪个是指着哪个，一图释所有：
一、CSS介绍
1、什么是css？
CSS（Cascading Style sheets），是用来为网页添加样式的代码
2、盒模型：
（1）内边距（
padding）：围绕着内容的空间，比如围绕段落的空间（2）边框（
border）：紧接着内边距的实体线段（3）外边距（
margin）：围绕元素外部的空间（4）宽度（
width）：这个涉及了IE盒模型和标准盒模型（5）高度（
height）
二、应用
1、简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
</head>
<body>
<h1>hello css!</h1>
<p>css 很6666</p>
</body>
</html>
/style.css/
h1{
padding:10px;
background-color: orange;
border:1px solid black;
}
2、CSS的工作原理
三阶段：
浏览器输入url——浏览器向服务器发送请求——服务器将相关数据处理返返至浏览器——浏览器拿到并加载页面——解析html的字符串，词法分析解析成树状结构——create Dom tree
解析html时，加载css，文件被下载——解析css文件对其分析——attach style to Dom nodes，加入create Dom tree
两树状结构对应起来——新的dom树（节点相关的元素、参数）——渲染、绘制页面
？：白屏、加载顺序、加载时机
3、css应用方式
（1）外部样式表（推荐）
A、链接方式：通过<link>引入css
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello css!</h1>
<p>css 很6666</p>
</body>
</html>
B、导入方式：通过@import引入样式，放入css中，不要忘记分号
可选择以下几种方式：如
@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);
/*加入条件限制，如媒体查询属性 */
@import url('landscape.css') screen and (orientation:landscape);
（2）内部样式（内嵌方式）
即将CSS放在页面的<style>元素中
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css">
<style>
@import "style2.css";
p{
font-size: 50px;
}
</style>
</head>
<body>
<h1>hello css!</h1>
<p>你好</p>
</body>
</html>
题外话：
- 注意文件路径
- 右键——检查——查看源代码——点击显示错误链接：
failed to load resource：net：ERR_FILE_NOT_FOUND
即提示有可能是以下错误可能：
- 文件不存在
- 文件路径写错了
（3）内联样式（行内方式）（不推荐）
即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中
如：
<p style="background:orange; font-size:24pax;">css很棒</p>
（4）属性样式（废弃）
如：
<img src="a.png" width=100 height=200>
三、css选择器
1、选择器类型
A、基础选择器
（1）*：通用元素选择器，匹配页面任何元素（比较少用）
（2）#id：id选择器，匹配特定id的元素
（3）.class：类选择器，匹配class包含（不是等于）特定类的元素
（4）element：标签选择器
B、组合选择器
（1）E,F：
多元选择器，相当于并列选择器。用 , 分隔，同时匹配元素E或者元素F
（2）E F ：
后代选择器。用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归），元素F
（3）E>F ：
子元素选择器。用 > 分隔，匹配E元素的所有直接子元素（再嵌套的子元素就没有用）
（4）E+F ：
直接相邻选择器。匹配E元素之后的相邻的同级元素F
（5）E~F ：
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F （无论直接相邻与否）
（6）.class1.class2 :
（既、又）id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
（7）element#id：
id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素
C、属性选择器
D、伪类选择器
E、伪元素选择器
关于这两类详情请看：
miya Wang：#07你认真学了css？（基本样式7：伪类和伪元素
2、基础选择器
（1）*：通用元素选择器，匹配页面任何元素（比较少用）
（2）#id：id选择器，匹配特定id的元素
（3）.class：类选择器，匹配class包含（不是等于）特定类的元素
（4）element：标签选择器
演示图：
3、组合选择器
（1）E,F：
多元选择器，相当于并列选择器。用 , 分隔，同时匹配元素E或者元素F
（2）E F ：
后代选择器。选择它所有的后代子元素。用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归），元素F
（3）E>F：
子元素选择器。（普遍）选择它第一子元素，对再嵌套的子元素没用。用 > 分隔，匹配E元素的所有直接子元素
（4）E+F ：
直接相邻选择器。匹配E元素之后的相邻同级所有元素F
（5）E~F ：
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F （无论直接相邻与否）
（6）.class1.class2 :
** 既、又**，直接靠在一起，同时拥有这两个类选择器特性的一个元素。id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
（7）element#id：
id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
4、属性选择器
（1）E[attr] ：匹配所有具有属性attr的元素，如div[id] 就能取到所有有id属性的div
（2）E[attr=value] :匹配属性attr值为value的元素，如div[id=test]，匹配id=test的div
5、伪类选择器
（1）定义：代表一个元素的另一种状态
（2）类型：
A、第一类：
-
E: first-child匹配元素E的第一个子元素 -
E：link匹配所有未被点击的链接 -
E: visited匹配所有已被点击的链接 -
E：active匹配鼠标已经其上按下，还没被释放的E元素 -
E：hover匹配鼠标悬停器上的E元素 -
E： focus匹配获得当前焦点的E元素 -
E： lang(c)匹配lang属性等于c的E元素 -
E：enabled匹配表单中可用的元素 -
E：disabled匹配表单中禁用的元素 -
E： checked匹配表单中被选中的radio或checkbox元素 -
E： selection匹配用户当前选中的元素
例子1：
如设置E：hover时，鼠标悬停元素时字体颜色就会变成蓝色。选择器权重会使得
a:hover{
color:blue;
}
大于
a{
color：red;
}
的权重
所以样式产生了覆盖，如图：
例子2:
a链接上常用的css属性选择器"
-
E：link匹配所有未被点击的链接 -
E: visited匹配所有已被点击的链接 -
E：hover匹配鼠标悬停器上的E元素 -
E：active匹配鼠标已经其上按下，还没被释放的E元素
由于css元素按顺序填写，依次展现元素属性，这里涉及到：a这个元素下的伪类选择器权重，从而造成样式覆盖，如图演示：
例子3：
-
E：enabled匹配表单中可用的元素 -
E：disabled匹配表单中禁用的元素
如输入框被禁用，如何设置css里的元素属性，如图：
image
B、第二类：
E：root匹配文档的根元素，对于html文档，实际上就是html元素-
E：nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
image -
E:nth-of-type(n)与：nth-child()作用类似，但仅匹配使用同种标签的元素
如图当n=1时
image
如图当n=？（1除外的任意数）
n的取值
1，2，3，4，5
2n+1，2n，4n-1
odd，even：
如何运用：
做一个表格上，分别可以做两色相间的表格效果，那么就可以运用odd，even
/* ```nth-child(odd) ```与 ```:nth-child(even) ```分别匹配序号为奇数与偶数的元素 */
.h-table tr:nth-child(even){
background-color: #f1f1f1;
}
6、伪元素选择器
（1）E::first-line 匹配E元素内容的第一行
（2）E::first-letter 匹配E元素内容的第一个字母
（3）E::before 在E元素之前插入生成的内容
（4）E::after在E元素之后插入生成的内容
举例如图：
7、选择器的优先级
（1）定义
如果多条规则作用于同一个元素上，且定义的相同属性的不同值。
（2）代码如下：
<style>
#test{color:#666;}
p {color:#333;}
</style>
<p id="text">Text</p>
（3）CSS优先级
从高到低分别是：
A、在属性后面使用 ：！important 即会覆盖页面内任何位置定义的元素样式
B、作为style属性写在元素标签上的内联样式
C、id选择器
D、类选择器
E、伪类选择器
F、属性选择器
G、标签选择器
H、通配符选择器
I、浏览器自定义
（4）复杂场景(按顺序）
a、行内样式<div style="XXX"><div>
b、ID选择器
c、类、属性选择器、伪类选择器
d、标签选择器、伪元素
注：选择器的优先级是如何计算的？
A、按顺序来计算的：假设：
a等级：行内样式
<div style="XXX"><div>
b等级：ID选择器 c等级：类、属性选择器、伪类选择器
d等级：标签选择器、伪元素
即a-d等级权值依次为5、4、3、2，按照a-d等级的属性顺序依次得分，若取到相应等级的权值，最高的则为最优先级别。
B、参考：当不同类别的多个选择器混合使用个怎么计算优先级？有一个简单的算法，设
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
（5）样式覆盖
后面的样式会覆盖到前面的样式
（6）选择器使用经验
- 遵守css书写规范
- 使用合适的命名空间
- 合理地复用class
习题练习：
1、CSS 加载方式有几种？
答：
（1）外部样式表（链接+导入）（推荐）
- 通过<link>引入css
- 通过
@import导入样式，放入css中，不要忘记分号。在html或者css文件中都可以导入@import
（2）内部样式（内嵌方式），即将CSS放在页面的<style>元素中
（3）内联样式（行内方式）（不推荐），即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中
（4）属性样式（废弃）
2、@charset有什么作用？
在外部样式表文件内使用，指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。如在外部css文件中写：
@charset "utf-8";
* {sRules}
.class{sRules}
3、@import有什么作用？如何使用？
答：作用：通过@import引入样式或者css文件，可以减少文件的容量，加快文件加载速度
用法：
@import 'style2.css';
@import "style2.css";
@import url("style2.css");
@import url('style2.css');
@import url(style2.css);
4、id 选择器和 class 选择器的使用场景分别是什么？
答：
（1）id选择器，用于匹配特定id的元素，具有独一无二不可代替性
（2）class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名
5、CSS选择器常见的有几种？
答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器
6、伪类选择器有哪些？伪元素有哪些？
答：（1）伪类选择器：
E: first-child 匹配元素E的第一个子元素
E：link 匹配所有未被点击的链接
E: visited匹配所有已被点击的链接
E：active匹配鼠标已经其上按下，还没被释放的E元素
E：hover匹配鼠标悬停器上的E元素
E：focus 匹配获得当前焦点的E元素
E：lang(c)匹配lang``属性等于c的E元素E：enabled匹配表单中可用的元素E：disabled 匹配表单中禁用的元素E： checked 匹配表单中被选中的radio或checkbox元素E： selection匹配用户当前选中的元素E：root匹配文档的根元素，对于html文档，实际上就是html元素E：nth-child（n）匹配其父元素的第n个子元素，第一个编号为1E:nth-of-type(n) 与：nth-child（）```作用类似，但仅匹配使用同种标签的元素
（2）伪元素：
-
E::first-line匹配E元素内容的第一行 -
E::first-letter匹配E元素内容的第一个字母 -
E::before在E元素之前插入生成的内容 -
E::after在E元素之后插入生成的内容
7、以下选择器分别是什么意思?
（1）
#header{
}
答：id选择器，匹配id为header的元素
（2）
.header{
}
答：类选择器，匹配class为header元素
（3）
.header .logo{
}
答：后代选择器，匹配class为header的元素logo
（4）
.header.mobile{
}
答：即又关系的并列元素，同时匹配这两个类选择器特性的一个元素
（5）
.header p, .header h3{
}
答：多元选择器，同时匹配.header p和 .header h3两个元素
（6）
#header a:hover{
}
答：在id为header元素下匹配a元素鼠标悬停属性
（7）
#header .logo~p{
}
答：在id为header元素下匹配logo元素之后的同级所有元素p （无论直接相邻与否）
（8）
#header .logo+p{
}
答：在class为header元素下匹配logo元素之后的相邻同级元素p
（9）
#header .logo p{
}
答：在id为header元素下匹配class为logo的后代元素p
（10）
#header .logo>p{
}
答：在id为header元素下匹配class为logo元素的所有直接子元素，即第一子元素p
（11）
#header p.logo{
}
答：在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性
（12）
#header .logo.p{
}
答：在id为header元素下同时匹配class为logo和p的元素
（13）
#header input[checked]{
}
答：在id为header元素下匹配checked值的input的元素
8、运行如下代码，并对结果做出解释
<style>
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
（1）效果图展示：
（2）对其结果作出解释：
运行1：
.box:first-child {
color: red;
}
选择同级第一个元素,并且这个元素class是box,显示该标签元素的内容颜色为红色
运行2：
.box:first-of-type {
background: blue;
}
选择同级第一个标签元素,并且这个元素是这个同级中的第一个标签，显示背景色为蓝色
运行3：（.box : .box和:之间要有空格）
.box :first-child {
font-size: 30px;
}
表示 .box里面（父元素）的第一个元素，显示字体大小为30px的结果
运行4：
.box :first-of-type {
font-weight: bold;
}
选择.box里（父元素）第一个同类型的元素，字体粗细为粗体
