标题都是奶奶都能看懂了，那么我们肯定从最基础的开始讲。之所以这么自信是因为能踩的坑全帮你们踩过了……
开始之前，先来首诗感受一下，具体啥意思你看完本文就懂了。
点类井号逗为或，类多号单连为且。
id 优先类在后，类型选择在末尾。
代码优先难解决，拿出鼠标数一数。
如若个数全相等，末尾样式最优先。
外联选择需谨慎，勿忘行内价最高。
CSS 基础
如果你 html 不会我也没办法……你网站都没内容还加啥 CSS 美化我也是服气。
简而言之，CSS 就是给你的 html 元素加点样式。要解决这个问题，要分三步走：
- 对哪个元素应用样式？（CSS 选择器）
- 应用什么样式？（属性）
- 想要怎么样的样式？（属性的值）
听不懂括号里的不要紧，下面我们先来点实在的，CSS 写在哪里。
三种用 CSS 的方法
- （常用）外联样式（就是单独开个 style.css，好处是多个 html 可以复用同一个 CSS）
<head><link rel="stylesheet" href="style.css">
</head>
<!--rel，即relationship，表示html与href中文件的关联，这里是样式表 (stylesheet)-->
- 内联样式（在 head 中添加 style 标签，里面写 CSS）
<head><style>...</style>
</head>
- 行内样式（对单个元素应用样式）
<div style="color:black;background-color:green"></div>
<!-- 没有选择器，因为你不用选择。什么是选择器看看下面就知道了 -->
基础 CSS 选择器
还记得上面的 CSS 三步走不？第一步是要选择你想要加样式的 html 元素。这叫做 CSS 选择器。
下面的代码，要么写在 .css 文件里，要么在上方内联省略号里
选择器分为三种。选元素类型、选元素的类（Class），选元素的 id。
p{}
.class1{}
.bad{}
#short-p{}
第一行，选中页面内所有的 p 元素。第二行，选择类为 class1 的元素。第三行，选择 id 为 myid 的元素。记住，点号选类，井号选 id。（死规则，别问）
我咋知道元素的类和 id 啊？也没人告诉我啊？
……因为这是你自己定义的。
比如，下面的 html 片段，设定了类和 id
<div><p class="bad class0" id="short-p">哼哼啊啊啊</p><p class="bad class1" id="long-p">哼哼啊啊啊啊啊啊</p>
</div>
注意到了吗？class 可以重复，id 则是唯一的。并且 class 一个元素可以有多个，用空格隔开。
假设我们在此处的 html 中添加了外联样式，那么上面的 CSS 分别会选中哪些呢？
p{} -->选中 哼哼啊啊啊 和 哼哼啊啊啊啊啊啊 两个 p 元素
.class1{} -->选中 哼哼啊啊啊啊啊啊
.bad{} --> 选中 哼哼啊啊啊 和 哼哼啊啊啊啊啊啊 两个元素
#short-p{} -->选中 哼哼啊啊啊
如果你要加多个条件，并且用 或 连接起来，你可以用半角英文逗号连接起来，比如：
.class1,
.class0{
}
会选中两个 p 元素（class0或class1）。
如果你要加 且，直接写一起即可：
.class0.bad{}
只有第一个 p 元素会被选中（只有它满足即是class0，又是bad）。
由于一个元素只能有一个 id，并且无法重复，所以不存在多个条件的问题。
口诀：点类井号逗为或，类多号单连为且。（点是类，井是 id，即元素的号码，逗号表示用或连接；类可以有多个，id 唯一，连起来表示用且连接）
常用属性
选择完成之后，当然要对选择的元素设定属性。
注意到了吗？上面的选择器后面都有一对大括号。在其中设定属性。
比如：
.class0.bad{color: green;background-color: red;
}
每个属性与值之间用 : （冒号和空格）隔开，属性与属性之间使用分号隔开。
上面的代码中用了 color background-color 分别表示字体颜色、背景颜色。保存后打开你的 html 文件，哼哼啊啊啊变成了绿色，有红色背景。（奶奶都会的英语你别说看不懂）
常用的其他 CSS 属性：
p,div,h1 /* 简单来说，有文字的都能用 */
{ font-size: 20px; /* 字体大小 */font-family: serif; /* 字体 */font-weight: 800; /* 字体的粗细，也可以用 bold 代替数字 */text-align: center; /* 文本对于父容器的位置 */
}
img /* 针对图片元素的设定 */
{width: 300px; /* 控制图片宽度 */height: auto;
}
一些要注意的要点如下：
- 这些英文你奶奶都会，如果你不会，赶紧去查一下单词含义然后记下来
- 字体可以设置多个，用
,隔开。如果字体名称里有空格，需要用""进行包裹。例如"Times New Roman",serif。浏览器会自动从前开始向后选择（并不是所有浏览器都支持你设定的自定义字体），因此，最后一个最好设定所有浏览器都支持的字体。 - 设定了长度和宽度中的任何一个，另外一个设为 auto（自动），即可自动按照比例缩放
- 只看不练没啥用，你可以拿自己之前写过的 html 练练手，设计一个有色彩的界面出来
表示关系的选择器
在了解了常用属性之后，我们回到第一步，再来讲讲表示元素之间关系的选择器。
什么意思呢？
在 html 中，元素中可以包括其它元素，比如上面的：
<div><p class="bad class0" id="short-p">哼哼啊啊啊</p><p class="bad class1" id="long-p">哼哼啊啊啊啊啊啊</p>
</div>
就是 div 里面包含了 p。
那么，如果我们再加一点……
<div><p class="bad class0" id="short-p">哼哼啊啊啊</p><p class="bad class1" id="long-p">哼哼啊啊啊啊啊啊</p>
</div>
<p class="bad class0" id="short-p-1">哼哼啊啊啊</p>
<p class="bad class1" id="long-p-2">哼哼啊啊啊啊啊啊</p>
如果说，我只想选中在 div 里面的，包含 bad 类的 p，怎么办？
直接用 id，或者修改 html 加个新的类当然可行，但是你也可以这么写：
div .bad{color: green;
}
这会将上面两个 p 颜色改为绿色。它表示 选择所有类型为 div 的元素内，类名称为 bad 的元素。这叫做子代选择器，将父与子用空格隔开。当然，你也可以加多个空格，来表示更加复杂的结构，比如 父 子 子 子。你可以用类型、类选择器进行组合。
组合时，请注意，逗号会将含有空格的选择器视为整体，观察下面的两个代码片段：
div .class0,div .class1 {color: green; /* 设置了 div 里面的两个 p */
}div .class0,.class1 {color: green; /* 猜测一下，这个的结果是？ */
}再把 html 给你看一眼，不用往上翻了……（id 删了，你用不到）
<div><p class="bad class0">哼哼啊啊啊</p><p class="bad class1">哼哼啊啊啊啊啊啊</p>
</div>
<p class="bad class0">哼哼啊啊啊</p>
<p class="bad class1">哼哼啊啊啊啊啊啊</p>
是下图所示的结果，你猜对了吗？这条规则表示，选择所有（类型为 div 的元素内，类名称为 class0 的元素），或者（类名称为 class1 的元素）。所以第一、第二个 p，以及第四个类包含 class1 的元素选中了。
CSS 优先级
最难的部分到了！
当你设置的属性发生冲突时，优先级高的会优先使用。
什么叫冲突？看看下面的片段：
p{color: green;
}
.class0{color: white;
}
那么，这个的颜色是？
<p class="bad class0">哼哼啊啊啊</p>
好的，我们现在就来解决优先级问题。
第一规则
先来第一条，这条优先级是最高的：
- id > class > type （id 优先于类，类优先于类型）
在上面的例子里，class0 优先级高于 p（类型），所以文字为白色。
继承属性问题
在这里要注意，有个特例，就是继承属性问题。
当一条 CSS 直接指向一个元素时，其优先级高于继承的属性。
啥叫继承属性？比如上面的，div 里套了 p，如果我给 div 应用 color 为蓝色，那么 p 也会被自动设置为蓝色，它从它的父亲那里拿到了属性，叫继承。
看看这个：
div .class0{color: blue;
}
#id1{color: red;
}
<div id="id1"><p class="class0">哼哼啊啊啊</p>
</div>
这时，继承属性打破了第一规则。文字被设定为蓝色，因为相比于继承，有更直接的属性设定（即使继承使用的 id 选择器优先级较高）
第二规则
如果上面的仍然不能决定，那么第二条：
- 选择器个数越多，那么优先级越高
- 空格、
*、>等不增加优先级
比如说：
div .class0{color: blue;
}
.bad{color: red;
}
那么，这个的颜色是？
<div><p class="bad class0">哼哼啊啊啊</p>
</div>
没错，根据第二规则，是蓝色。
让我们改动一下……
div #id1{color: blue;
}
#id1{color: red;
}
那么，这个的颜色是？
<div><p id="id1">哼哼啊啊啊</p>
</div>
因为第一条规则选择器个数多，所以是蓝色。
第三规则
让我们再改动一下……
.class0,.class1{color: blue;
}
.bad{color: red;
}
那么，这个的颜色是？
<p class="bad class0">哼哼啊啊啊</p>
应该是蓝色对吧？
当然……不是！因为上面的使用逗号隔开的，所以你可以把它视作下面的代码（它们是等效的）：
.class0{color: blue;
}
.class1{color: blue;
}
.bad{color: red;
}
所以优先级根本就相同。此时，第二条规则也无法判断优先级，是时候拿出第三条规则了。
- 如果仍然无法判断优先级，那么 CSS 文件中，越靠后的优先级越高。
所以上面的颜色为红色。
视觉样式的叠加
不是，哥们，你写这种冲突有意义吗？？？
当然有意义！因为，你可以先写一个优先级低的选择器比如把你的背景全部设为黑色，然后把其中一部分用优先级高的选择器覆盖，形成多样的视觉样式。看看这个：
*{background-color: black;color: white;
}
.steps li{color: red;background-color: white;
}
加上 html：
<ol class="steps"><li>Code</li><li>Deploy</li>
</ol>
得到的效果：
COOL~
第零规则
对了，其实还有一条规则，我愿意称之为 第0规则。
- 行内样式>其它任何样式
就是直接在 html 标签里设定，优先级最高。这条比较特殊，所以这里简单提一下，也没啥坑。
总结
还记得开头的小诗吗？我们回顾一下，现在你能看懂了吧？
点类井号逗为或，类多号单连为且。
id 优先类在后，类型选择在末尾。
代码优先难解决，拿出鼠标数一数。
如若个数全相等，末尾样式最优先。
外联选择需谨慎，勿忘行内价最高。
写在后面
好了，基础语法讲完了，是不是奶奶都能看懂？？？
下一篇来讲盒子模型，一样的，还是奶奶系列，追求极致的简单。
