使用class选择器时，在CSS中用点号加类名定义样式，如.highlight { background-color: yellow; }，可应用于HTML元素<p class="highlight">这段文字会被高亮</p>；多个class组合时写作.btn.active表示同时拥有btn和active类的元素；结合标签名如p.error可限定元素类型；通过.container .title或.nav > .link可按层级关系定位后代或子元素，提升选择精度。
在CSS中，使用class选择特定组件非常简单。你只需要在样式表中用点号（.）加上class名称来定义样式规则。这个class可以被应用到任意HTML元素上，浏览器会自动将匹配的样式应用到带有该class的元素。
基本语法
格式：在class名前加一个点（.）例如，你想为所有具有 highlight 这个class的元素设置背景黄色：
.highlight { background-color: yellow; }
然后在HTML中这样使用：
立即学习“前端免费学习笔记（深入）”；
<p class="highlight">这段文字会被高亮</p>
选择多个class的组合
如果一个元素有多个class，你可以通过组合选择器来精确匹配比如HTML元素是：<div class="btn active primary"></div>
你可以这样写CSS只选中同时具有 btn 和 active 的元素：
-
.btn.active { color: white; }—— 注意中间没有空格，表示同时拥有这两个class
结合元素类型更精确选择
如果你想只选择某一类元素中的特定class，可以在前面加上标签名-
p.error { color: red; }—— 只对段落中class为error的元素生效 -
button.submit { padding: 10px; }—— 只作用于class包含submit的按钮
在复杂结构中定位特定class
可以通过层级关系进一步限定选择范围-
.container .title—— 选择class为container的元素内部，class为title的后代元素 -
.nav > .link—— 使用>表示直接子元素，只选.nav下的直接子级.link
