类选择器是css中最常用的工具之一，它通过在class名前加点（.）来选中元素，例如.btn会匹配所有class为btn的元素。一个元素可拥有多个类，用空格分隔，如class=”btn primary”，此时.btn和.primary样式都会生效。若需特定组合时生效，可使用连写形式如.btn.primary（顺序不影响），适用于主题或状态区分。为避免类冲突，建议采用命名空间前缀、统一命名规范（如bem）、模块化方案或功能前缀。此外，属性选择器也能辅助动态匹配，如[class^=”col-“]匹配以col-开头的类，[class*=”text-“]匹配包含text-的类，[class$=”-right”]匹配以-right结尾的类，灵活但需注意影响范围。
写网页样式的时候，类选择器是最常用的一种方式。它能让你快速给html里的多个元素加上相同的样式，也能通过组合使用实现更精确的控制。关键在于怎么用得准、不混淆。
类选择器的基本写法
类选择器在CSS里是用点（.）开头的，比如.btn，代表选中所有class为btn的元素。这是最基础也最常见的用法。
举个例子：
立即学习“前端免费学习笔记（深入）”；
<button class="btn">点击我</button>
对应的CSS：
.btn { background: blue; color: white; }
这样就能统一设置所有带有btn类的按钮样式。注意，一个元素可以有多个类，用空格分隔，例如：
<button class="btn primary">主按钮</button>
这时候.btn和.primary的样式都会作用在这个按钮上。
多个类组合使用，提高精准度
有时候你希望某些样式只在特定组合下才生效。这时候可以用多个类连在一起写，中间没有空格，表示同时包含这些类的元素才会被选中。
比如：
.btn.primary { background: darkblue; }
这个规则只会作用于同时有btn和primary类的元素。这种写法适合做主题变体或者状态区分，比如按钮的默认态、禁用态、激活态等。
但要注意的是：
- .btn.primary 和 .primary.btn 是一样的，顺序不影响匹配
- 它和 .btn .primary（带空格）完全不同，后者是后代选择器
避免类名冲突的小技巧
类名冲突是常见的问题，特别是在多人协作或引入第三方组件时。比如两个地方都用了.container，但样式不一样，就可能互相干扰。
解决办法有几个：
- 使用命名空间前缀，比如.user-container、.product-container
- 在项目中约定统一的命名规范，如BEM风格（Block Element Modifier）
- 使用CSS模块化方案（适用于现代前端框架）
即使不用复杂方案，简单地加个功能前缀也能避免很多麻烦。比如.nav-link比.link更具体，也不容易撞车。
利用属性选择器做动态匹配（进阶用法）
如果你的类名有一定规律，还可以用属性选择器来匹配。比如下面这个例子：
[class^="col-"] { float: left; }
这段代码会匹配所有以col-开头的类名，常用于栅格系统。类似的方式还有：
- [class*=”text-“]：包含text-的类名
- [class$=”-right”]：结尾是-right的类名
这种方式灵活但要小心使用，避免影响范围过大。
类选择器看起来简单，但用得好需要理解它的匹配逻辑和常见陷阱。像组合类、命名冲突、属性匹配这些点，掌握之后能让你写的CSS更清晰、更可控。基本上就这些，不难但容易忽略细节。
