先找到元素，再设置样式
三种基本选择器
选择器告诉浏览器：这条 CSS 样式要应用到哪些 HTML 元素上。
- 元素选择器：直接使用标签名。例如
p选中页面中的所有<p>元素 - 类选择器：写成
.类名。例如.notice选中带有class="notice"的元素；多个元素可以使用同一个类。 - ID 选择器：写成
#标识名。例如#intro选中id="intro"的元素；同一页面中的 ID 值应唯一。
注意：. 和 # 写在 CSS 选择器中，不写进 HTML 的属性值。下面 color 设置文字颜色，font-weight: bold 设置粗体。
<style>
p { color: teal; } /* 所有段落：青绿色 */
.notice { font-weight: bold; } /* 通知类元素：粗体 */
#intro { color: navy; } /* 指定标题：深蓝色 */
</style>
<h1 id="intro">黄梅戏分享会</h1>
<p class="notice">周三下午</p>
<p>欢迎参加</p>第一个段落同时被 p 和 .notice 选中，因此文字为青绿色且加粗；第二个段落只被 p 选中，文字为青绿色。
多个样式遇到一起：叠加还是覆盖？
① 不同属性：同时生效
<style>
p { color: red; }
.notice { font-weight: bold; }
</style>
<p>黄梅戏分享会：欢迎参加</p>
<p class="notice">活动通知：周三下午</p>两个段落都是红色，但只有通知段落加粗。颜色与字重是不同属性，可以同时生效。
② 相同选择器、相同属性：后写的生效
<style>
.notice { color: red; }
.notice { color: blue; }
</style>
<p class="notice">活动通知：周三下午</p>通知文字最终为蓝色。交换两条规则的位置再运行，文字变为红色：选择器相同时，后写的颜色生效。
③ 不同优先级：后写的不一定生效
<style>
.notice { color: red; }
p { color: blue; }
</style>
<p>黄梅戏分享会：欢迎参加</p>
<p class="notice">活动通知：周三下午</p>普通段落为蓝色，通知段落仍为红色。虽然 p 写在后面，但类选择器 .notice 的优先级更高。交换这两条规则的位置，结果不变。
- 本页这种普通样式规则中，单个选择器的优先级为：ID 选择器 ＞ 类选择器 ＞ 元素选择器。
- 优先级相同时，后写的同名属性生效；并不是“最后写的规则总能覆盖前面的规则”。
- 覆盖是针对发生冲突的属性，不是把前面整条规则全部删除。
这里比较的是同一来源、同一层中的普通声明，暂不涉及 !important、行内样式和动画等情况；完整的规则称为 CSS 的“层叠”。
提问
两个段落都要用通知样式，应重复id="intro"，还是给它们相同的class？
展开参考分析
应使用相同class，类可复用；id在同一文档中应唯一。重复ID可能影响脚本查询、锚点和标签关联，不能靠当前颜色正常判定结构正确。
延伸阅读：为什么把内容与样式分开？
HTML 表达内容与结构，CSS 表达外观。同一份活动信息可以针对电脑、手机和打印设置不同样式，也可以让多个元素复用一套样式，便于维护。
CSS1、CSS2 是历史版本称呼；今天 CSS 的各模块独立演进，“CSS3”不是一份永远不变的单一规范。