使用class选择器时,在CSS中用点号加类名定义样式,如.highlight { background-color: yellow; },可应用于HTML元素这段文字会被高亮 .link可按层级关系定位后代或子元素,提升选择精度。

在CSS中,使用class选择特定组件非常简单。你只需要在样式表中用点号(.)加上class名称来定义样式规则。这个class可以被应用到任意HTML元素上,浏览器会自动将匹配的样式应用到带有该class的元素。
基本语法
格式:在class名前加一个点(.)例如,你想为所有具有 highlight 这个class的元素设置背景黄色:
.highlight { background-color: yellow; }
然后在HTML中这样使用:
立即学习“前端免费学习笔记(深入)”;
这段文字会被高亮
选择多个class的组合
如果一个元素有多个class,你可以通过组合选择器来精确匹配比如HTML元素是:
你可以这样写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










