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)的更多相关文章

  1. CSS中before、after伪类选择器的巧用

    大家好,今天给大家带来使用css中 before . after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么 选择器 作用 before 向选定的元素前插入 ...

  2. Css详解之(伪类选择器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. css 类选择器结合元素选择器和多类选择器

    1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含imp ...

  5. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  6. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  7. CSS 类选择器(四)

    一.类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户 ...

  8. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  9. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

随机推荐

  1. Material DesignDrawerLayout的旋转箭头的实现方式。

    实际上,官方已经提供了实现方法,可是,有非常多捞偏门的教程,也有非常优秀的第三方.写出来.供还没找到的同学參考. 前提是:你对android.support.v7.widget.Toolbar已经有过 ...

  2. linux卸载自带jdk

    centos 6.5系统 java -version: rpm -qa | grep jdk rpm -qa | grep gcj: 使用: yum -y remove java-1.5.0-gcj- ...

  3. Python 文件 read() 方法

    概述 Python 文件 read() 方法用于从文件中读取指定的字符数,如果未给定或为负则读取所有. 语法 read() 方法语法如下: fileObject.read([size]) 参数 siz ...

  4. 常用的代码之一:用StopWatch计算代码运行花费的时间。

    先引用Diagnostics using System.Diagnostics; 然后: Stopwatch stopWatch = new Stopwatch(); stopWatch.Start( ...

  5. Winform开发框架之通用高级查询模块--SNF快速开发平台3.3-Spring.Net.Framework

    最近项目确实忙,但也是一直忙于有关项目和框架技术的事情,也一直致力于改善我的WInform开发框架.使得自己及客户使用起来更加方便,更加友好,更加高效. 在很多程序模块中都很常见,也是给客户扩展查询的 ...

  6. tomcat 8080 冲突 急速解决方法 -------屡试不爽

    cmd    输入: netstat -ano|findstr 8080 记住 最后的端口号**** 再输入: taskkill  /pid  ****  /f

  7. Atitit gui界面ui技术发展史与未来趋势

    Atitit gui界面ui技术发展史与未来趋势 1. Gui技术的发展,从像素自绘到native控件体系,再到dsl h51 1.1. 编程语言的发展 从机器语言,汇编语言到本地native语言(c ...

  8. Java Web(十一) 分页功能的实现

    虽然现在有很多好用的框架,对分页进行支持,很简单的就把分页的效果做出来,但是如果自己手写是一个怎样的流程的?今天就来说说它,手动实现分页效果. --WH 一.分页的思路 首先我们得知道写分页代码时的思 ...

  9. Java常考面试题(三)

    序言 说说今天遇到的一件小事吧,在遇到问题,查找答案时,看到很多人的博客里面都有提到关键字眼,可让人觉得可恨的是,大多数人写的博文中,基本上都是照着书上的语言发表的,看了跟没看一样,没有一点通俗的语言 ...

  10. VS2010常用插件