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. Oracle 12C -- truncate的级联操作

    在之前的版本中,存在外键约束时,无法直接truncate父表.在12C中,对truncate操作添加了级联操作特性. 前提是创建外键约束时,使用了"on delete casacde&quo ...

  2. xtrabackup-工作原理

    数据备份 xtrabackup是基于innodb的crash恢复功能之上的.它会拷贝innodb数据文件(这会导致数据不一致的),然后对文件执行crash恢复使其一致. 因为innodb维护了redo ...

  3. mmap映射文件至内存( 实现 共享内存 与 文件的另类访问 )

    Linux提供了内存映射函数mmap, 它把文件内容映射到一段内存上(准确说是虚拟内存上), 通过对这段内存的读取和修改, 实现对文件的读取和修改, 先来看一下mmap的函数声明: 头文件: < ...

  4. STL 的string类怎么啦？

    前言   上个周末在和我的同学爬香山闲聊时,同学说到STL中的string类曾经让他备受折磨,几年前他开发一个系统前对string类还比较清楚,然后随着程序的复杂度的加深,到了后期,他几乎对strin ...

  5. app-framework学习--官网地址及demo下载地址

    一起学习共同进步,加油..! 官网地址:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/detail/ha ...

  6. 修改firefox/chrome浏览器的UserAgent

    Firefox: about:config ---> useragent ---> general.useragent.override -> DIY_AGENT Chrome: 创 ...

  7. python 取整的两种方法

    问题简介: 要把一个浮点数(float)整数部分提取出来.比如把“2.1”变成“2”的这一过程:现在我们给这个过程起一个名字叫“取整”.那么它 在python中大致可以有两种写法 写法1)类型转换: ...

  8. 电子证据 利用Kali进行wifi钓鱼实战详细教程

    电子证据 利用Kali进行wifi钓鱼实战详细教程 一. Kali系统安装和必要软件安装: 1.Kali最新版可以来我这儿拿外置驱动和光盘装,目测用U盘装最新版有些问题,比较麻烦. 2.Kali更新源 ...

  9. Spring Security教程(二)：通过数据库获得用户权限信息

    上一篇博客中,Spring Security教程(一):初识Spring Security,我把用户信息和权限信息放到了xml文件中,这是为了演示如何使用最小的配置就可以使用Spring Securi ...

  10. HTML5基础小结（二）——标签小例

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0 ...