CSS类选择器参考手册

一个元素同时使用多个类选择器

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>

CSS一个元素同时使用多个类选择器（class selector）相关推荐

CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式: 后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...
CSS复合选择器之链接伪类选择器及总结
在某些大型购物网站.新闻网站中可以看到许许多多的链接,其中很多链接的样式都为黑色,当鼠标放到某一链接上的时候,链接的颜色也会变化,点击过后颜色也会变化.这就用到了CSS复合选择器中的链接伪类选择器. ...
CSS基础(part20)--CSS3结构伪类选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案结构伪类选择器属性列表: nth-child(n) 参数详解: 注意:本质上就是选中第几个子元素 n可以是数字.关键字.公式 n如果是数字,就 ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
CSS 类选择器详解——CSS 多类选择器
类选择器允许以一种独立于文档元素的方式来指定样式. CSS 类选择器类选择器允许以一种独立于文档元素的方式来指定样式. 该选择器可以单独使用,也可以与其他元素结合使用. 提示:只有适当地标记文档后, ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...

CSS一个元素同时使用多个类选择器（class selector）

一个元素同时使用多个类选择器

CSS类选择器的匹配规则

一个更小的例子

CSS一个元素同时使用多个类选择器（class selector）相关推荐

最新文章

热门文章