这是我参与「第四届青训营 」笔记创作活动的第十三天
CSS基础知识总结(三)
本 章 着 重 复 习 css 的 基 础 内 容 ， 学 习 css 究 竟 要 学 些 什 么 呢 ？ 主 要 是 学 习 网 页 的 “ 美化 ” 。
接上一篇文字，我们本篇继续介绍一下： CSS 基础选择器，详细阐述"类选择器！"
类选择器
1.概论
在 CSS 中，类选择器以一个点号显示。
类选择器口诀：样式点定义，结构类( class )调用 开发最常用！
类 选 择 器 使 用 " . "(英 文 点 号 )进 行 标 识 ， 后 面 紧 跟 类 名 。
2.基本语法格式 ：
在 <head> </head> 标签里面，写的是 style 样式，类选择器以一个点号显示。
(1)语法如下：
<style>
.red {
color: red;
}
.yellow {
color: yellow;
}
</style>
(2)选择器
在上面的例子中，所有拥有 red 类的 HTML 元素颜色都是红色，而所有拥有 yellow 类的 HTML 元素颜色都是黄色。
(3)HTML代码
在下面的 HTML 代码中，div 具有 red 类,它将遵循.red 选择器的规则！
p 元素都有 yellow 类。这意味着它将遵守 ".yellow" 选择器中的规则。
<div class="red">变红色1</div>
<p class="yellow">一个金黄色的香蕉</p>
3.类选择器多类名的使用：
(1)语法
<元素 class="类名1 类名2 类名3.......">
(2)实例：
<style>
.red { color: red;}
.font35 {font-size: 35px;}
</style>
<p class="red font35">这是一行文字</p>
我们可以看到，p 标签 不仅具有 red 类 ，还有 font35 类，所以它会
将遵守 ".red" 选择器 和 .font35选择器 中的规则!
4.被用作派生选择器
(1)语法
和 id 一样，class 也可被用作派生选择器： '类选择器'可以与后代(派生)选择器复合，进行精准选择！
(2)实例：
style 文件
.nav li a {
color: pink;
}
HTML 元素
<!-- 测试精准选择！ -->
<ul>
<li> <a href="#">我不会变化的！</a></li>
</ul>
<ul class="nav">
<li>
<a href="#">我会变化颜色！</a>
</li>
</ul>
我们可以看到，只有带有 nav 类的标签 li才能发生变化。即使在页面中有很多的 li>>a,但是只有带有类选择器 class='nav' 的才能改变颜色！！！
5.优点：
类选择器，可 以 为 某一个单独类别的 元 素 对 象，进行 定 义 单 独 样 式 。
从而 不选择 页面中的该类的全部标签，而是 可 以 选 择 一 个 或 者 多 个 标 签 。
即我们所说的 ： 多个元素可以绑定一个 class。
6.注意：
(1)保障兼容性
注意：类名的第一个字符不能使用数字。 否则，它将无法在 Firefox 中起作用，尤其是在考虑兼容性的时候，更要注意这一点！
