CSS一个元素同时使用多个类选择器(class selector)
一个元素同时使用多个类选择器
CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div class="user login">能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值,则该属性值先被改为.user中的值,再被改为.login中的值,即重复的属性以最后一个选择器中的属性值为准。测试如下:
<style> .user {
font-size: 30px; background-color:red; } .login { background-color:blue; } </style> </head> <body> <div class='user'>你好。这是一个 DIV 元素,class='user'。</div> <div class='login'>你好。这是一个 DIV 元素,class='login'。</div> <div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div> </body>
第三个div元素的背景颜色以.login中的为准,效果如下图:
CSS类选择器的匹配规则
CSS中多个类选择器之间有没有空格是怎样的匹配规则?如.user.login和.user .login(中间有空格)的区别?
直接上例子。电商项目中的导航栏,包括用户的登录/注册/注销,以及购物车等信息。
Html:
<div class="nav"> <div class="w"> <div class="user-info"> <span class="user not-login"> <span class="link js-login">登录</span> <span class="link js-register">注册</span> </span> <span class="user login"> <span class="link-text"> 欢迎, <span class="username"></span></span> <span class="link">退出</span> </span> </div> <!-- 右侧的导航链接 --> <ul class="nav-list"> <li class="nav-item"> <a class="link" href="./cart.html"> <i class="fa fa-shopping-cart"></i> 购物车(<span class="cart-cont">0</span>) </a> </li> <li class="nav-item"> <a class="link" href="./order-list.html">我的订单</a> </li> <li class="nav-item"> <a class="link" href="./user-center.html">我的MMall</a> </li> <li class="nav-item"> <a class="link" href="./about.html">关于MMall</a> </li> </ul> </div> </div>
CSS:
.nav{ background: #eee; height: 30px; line-height: 30px; } /* 用户部分 */ .nav .user{ float: left; } .nav .user.login{ display: none; } .nav .user .link{ margin-right: 5px; } /* 导航链接部分 */ .nav .nav-list{ float: right; } .nav .nav-list .nav-item{ display: inline-block; margin-left: 5px; }
观察上面代码的运行结果可知:
- .nav .user(中间有空格)匹配到class含有nav的元素下面的class含有user的元素,是<span class="user not-login">和<span class="user login">。
- .user.login(中间没有空格)匹配到class同时含有user和login的元素,是<span class="user login">。
- .nav .user.login(.nav和.user中间有空格,.user和.login中间没有空格)匹配到class含有nav的元素下面的class同时含有user和login的元素,是<span class="user login">。
一个更小的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style> .user.login /* 匹配同时包含user和login的元素 */ { font-size: 35px; } .user .login{ /* 匹配含user下的含login的元素 */ background-color:green; } </style> </head> <body> <div class='user'>你好。这是一个 DIV 元素,class='user'。 <div class='login'>你好。这是一个 DIV 元素,class='user login'。</div> </div> <div class='login'>你好。这是一个 DIV 元素,class='login'。</div> <div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div> </body> </html>
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在 .NET 中使用内存映射文件构建高性能的进程间通信队列
· 一个 java 空指针异常的解决过程
· 揭开 SQL Server 和 PostgreSQL 填充因子的神秘面纱
· 没有调度器的协程不是好协程,零基础深入浅出 C++20 协程
· 别做抢活的导演:代码中的抽象层次原则
· 今年失业的程序员兄弟姐妹们,你们都去干什么了?
· TinyEditor v4.0 alpha 版本发布:表格更强大,表情更丰富,上传体验超乎想象!
· .NET周刊【7月第2期 2025-07-13】
· 圆方树学习笔记 —— 一种关于点双连通分量的思考方式
· MySQL 17 如何正确地显示随机消息?