如果说我要给所有的p标签都定义一个颜色，怎么办？复制粘贴？
再次提醒：程序员厌恶复制粘贴！
CSS设置可以放在三个地方，分别被称为：
Inline，也叫行内样式。
这是我们已经学过的，CSS的设置放置在HTML元素的style属性里面，这里面的设置只能作用于当前元素
Embedding，也叫页内样式。
CSS设置放置在一个<style></style>标记块里面。这里面的设置能作用于整个当前页面。
<head>
<style>
/*这里写CSS样式*/
</style>
</head>
这行代码通常也放置于head标签之中。
Linking，也叫外部样式。
把CSS设置放置在一个独立的以.css为后缀的文件中，文件中直接写样式，不需要<style>标记；
然后在HTML中引入：
<link rel="stylesheet" href="/css/lucky.css" />
可以写在页面任何地方，但我们通常把它也放在head中。
说明：为方便描述，后文用<style>表示嵌入和/或外联样式表声明区域。
回头想一想我们的需求：要给所有的p标签……我们怎么表示“所有的p标签”呢？在页内样式或外部样式中，使用“标签选择器”即可。
包括标签选择器，CSS一共提供了以下类型的选择器：
表示所有该标签均适用 {}中定义的样式：
/*所有p标签都是蓝色文字*/
p{
color:blue;
}
在元素中添加一个属性：属性名class，属性值自己设定，比如说red
<p class="red"> 源栈欢迎您！</p>然后，在<style>块中以圆点（.）开头，后接red，再用花括号括起来：
/*所有含有属性class="red"的元素，文字都是红色*/
.red{
color:red;
}
和类选择器类似。但HTML元素中属性名为id，<style>块中，前缀为井号（#）
<p id="primary"> 源栈欢迎您！</p>
/*含有属性id="primary"的元素，文字是红色*/
#primary {
background-color: aquamarine;
}
但是注意：按规范，一个页面甚至一个网站，一个id只能适用于一个元素——这是和class不同的，一个class可以（也应该）适用于多个元素。PS：一个页面多个元素使用相同id的结果因浏览器不同而略有差异，但重要的是我们一开始就不应该这样用！
所以Id选择器重用的场景并不多……
以有无某属性，或者属性值为某某某进行匹配：
主要用于form表单<input type="text" value="源栈欢迎你" /> <input type="button" value="大飞哥" /> <input type="checkbox" checked />
其标志符号是方括号[]：
[type]{
[type="button"]{
[checked]{
也可用于a标签，
<a href="https://17bang.ren">17bang.ren</a> <a href="http://sample.17bang.ren/Code">sample.17bang.ren</a>比如href的属性值
[href*="sample"]{
[href^="https"]{
[href$='code']{
说明：【说明】在学习盒子模型时讲解
使用星号（*）引导，{}中的样式会适用于所有元素：
* {}
通常用于“清场”（解决浏览器兼容问题等），
一个元素可以同时设置id、class和style三种属性，^_^
<p id="primary" class="red" style="text-align:right"> 源栈欢迎您！</p>
一个class中还可以使用多个：
<h1 class="red important">源栈</h1>
如果这些样式并不冲突，该元素可以同时（层叠）使用：
当出现冲突时，CSS只能选择适用一种样式。
演示：使用F12调试工具
也可能在一个/种选择器中，同一项样式设置了多次：
.red {
color: red;
color: green; /* 最终生效 */
}
写在后面的样式会覆盖前面的样式。
包括：同一个页面引入了多个.css文件，后引入的会覆盖前面的……所以，尽量不要混用CSS框架（比如bootstrap和elementUI），否则很容易出问题。
最后，你可能希望某个地方的设置永远不要被覆盖！这时候你可以使用 !important：
p {
/*永远无法被其他位置的设置更改，
哪怕是 style="color: blue"*/
color: red !important;
}
在<style>中，还可以将若干选择器组合起来定义，包括：
逗号（,）" 分隔：
p, .mark {
p和.mark都使用一样的样式。
也可以更多分组：
p, .mark, div {
空格" " 分隔：
p .mark{
在p元素“里面”（所有后代元素）的标记为class="mark"的元素受影响 <p> 一起帮，助力 <span class="mark">职业自由</span></p>
<p> 一起帮，<a> 助力 <span class="mark">职业自由</span></a></p>
大于符号">"分隔:
p>.mark{
p元素的子元素，如果标记为class="mark"，就会受影响
h1和p是兄弟
<h1 class="mark"> 源栈欢迎您！</h1> <p> 一起帮，助力职业自由</p> <p> 键盘敲烂，月薪过万</p>
h1 ~ p {
h1 + p {
直接写在一起，注意没有空格：
p.mark{
标注了class="mark"的p元素：
<h1 class="mark"> 源栈欢迎您！</h1> <p class="mark"> 一起帮，助力 <span >职业自由</span></p> <p> 一起帮，助力职业自由</p>
.mark.important{
（至少）同时使用了mark和important两个类
<h1 class="mark"> 源栈欢迎您！</h1> <p class="mark important"> 一起帮，助力职业自由</p> <p> 一起帮，助力 <span class="important">职业自由</span></p>
PS：学习这种复杂语法的意义：
所以，不要觉得“这个太复杂，算了，我不这样用就是了……”。你不这样用，别人会这样用！你除了自己写代码，还得去读别人的代码。
#常见面试题# 如何合理有效的组织CSS？
一般来说，CSS会是前端最混乱的部分。大致因为：
一种最简单粗暴的方式：只允许使用外部样式。这样做有两个好处：
但这种方式会带来几个副作用：
所以，飞哥个人建议，如果一个样式，
#体会#：从追求“纯粹”，到寻求“妥协”。
多快好省！前端后端，线上线下，名师精讲
更多了解 加：
