CSS类选择器

类选择器（Class Selector）通过元素的 class 属性值选中元素。

基本语法

CSS

.类名 {
  属性: 值;
}

HTML 中使用 class 属性：

HTML

<div class="box">内容</div>
<div class="box highlight">多个类</div>

使用示例

CSS

/* 单类选择器 */
.box {
  width: 200px;
  padding: 10px;
}

/* 多类选择器 */
.box.highlight {
  background: yellow;
}

/* 类与标签组合 */
p.text {
  color: blue;
}

特点

特性	说明
语法	以 `.` 开头
权重	权重值10
重复使用	同一页面可多次使用
多类组合	元素可有多个 class

多类选择器

CSS

/* 同时匹配两个类 */
.active.selected {
  border: 2px solid red;
}

/* 匹配任一类 */
<div class="btn primary">按钮</div>
<div class="btn warning">警告</div>

.btn { padding: 10px; }
.primary { background: blue; }
.warning { background: orange; }

类命名规范

CSS

/* 推荐：语义化命名 */
.card-header { }
.nav-item { }
.btn-primary { }

/* 不推荐：无意义命名 */
.red { }
.big { }
.style1 { }

注意：类选择器可复用，是CSS中最常用的选择器类型。

要点总结

类选择器以 . 开头，匹配 class 属性
权重值为10，高于标签选择器
同一个类可被多个元素使用
元素可同时拥有多个 class

存放路径：articles/CSS/入门/CSS选择器/CSS类选择器.md