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. please verify the preference field with the prompt:Tomcat JDK name

    使用MyEclipse的Tomcat的时候出现下面的问题: a   configuration   error   occurred   during   startup.   please   ve ...

  2. ASP.NET MVC 向浏览器发送文件以提供文件下载功能

    撑到大三了,结果发现周围的同学更加堕落了,尤其是某些人,表面上看起来很认真,实际上三天打鱼,两天晒网,结果一事无成,却还要抱怨学校教育失败. 为了吸取他们的教训,就算是一个小小的编码问题,我也要努力解 ...

  3. Android 线程 thread 两种实现方法

    原文链接: http://blog.csdn.net/boyupeng/article/details/6208072 这篇文章中有三点需要提前说明一下, 一: 在android中有两种实现线程thr ...

  4. Asp.net2.0之自定义控件ImageButton

    控件模仿winform中的button,可以支持图片和文字.可以选择执行服务器端程序还是客户端程序,还有一些简单的设置. 不足的是不支持样式,下次希望可以写一个工具条. 以下就是代码 以下为引用的内容 ...

  5. Internet上的WWW服务与HTTP协议（非常非常不错的文档，推荐订阅）

    Internet上的WWW服务与HTTP协议 兼容性----H1TP/1.1与HTTP/1.0后向兼容;运行1.1版本的web服务器可以与运行1.0版本的浏览器“对话”,运行1.1版本的浏览器也可以与 ...

  6. ansible 批量推送公钥

    这里我们使用ansible的playbook 的功能来推送秘钥 使用方法参见:http://blog.csdn.net/magedu_linux/article/details/48529645 这里 ...

  7. 关于 NSInvocation

    Invocation   调用的意思. 可想而知NSInvocation 是一个 方法调用 封装的类. 这体现了  面向对象的思想, 及一切皆对象.函数也不例外. 一般编程中,应该很少用到这个. 但是 ...

  8. 解决 SQL Server 所有帐号无 sysadmin 权限，且未启用 SQL Server 身份验证，sa 帐号也未启用的问题

    解决 未启用 SQL Server 身份验证 的问题: 1. 运行 regedit,进入注册表编辑器 2. 打开:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Micro ...

  9. JVM调优之---一次GC调优实战

    某系统反馈『性能抖动,响应时间会突然飙高,TP999 MAX会到3000+』,初步怀疑是JVM FULL GC导致的 STW,观察FULL GC日志默认的JVM参数: -Xms4096m -Xmx40 ...

  10. php实现文件下载代码一例

    php实现文件下载代码 需要用到header函数来发送相关信息给客户端浏览器,同时再结合filesize函数来读取文件大小并进行下载操作.简单的文件下载只需要使用HTML的连接标记<a>, ...