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

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>

复制代码

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css 块元素、内联元素、内联块元素

元素就是标签&#xff0c;布局中常用的有三种标签&#xff0c;块元素、内联元素、内联块元素&#xff0c;了解这三种元素的特性&#xff0c;才能熟练的进行页面布局。 块元素&#xff1a; 块元素&#xff0c;也可以称为行元素&#xff0c;布局中常用的标签&#xff0c;如&…

PWN-PRACTICE-BUUCTF-10

PWN-PRACTICE-BUUCTF-10jarvisoj_level3_x64bjdctf_2020_babyrop2hitcontraining_uafjarvisoj_test_your_memoryjarvisoj_level3_x64 64位elf的栈溢出&#xff0c;ret2csu from pwn import * #context.log_leveldebug #ioprocess(./jarvisoj_level3_x64) ioremote(node4.buuo…

PWN-PRACTICE-BUUCTF-11

PWN-PRACTICE-BUUCTF-11bjdctf_2020_routerpicoctf_2018_buffer overflow 1pwnable_orwwustctf2020_getshellbjdctf_2020_router Linux 系统可以在一个命令行上执行多个命令:; --如果命令被分号(;)所分隔&#xff0c;那么命令会连续的执行下去&#xff0c;就算是错误的命令也会…

Redis与关系型数据库的同步问题

Redis是一个高性能的key-value数据库。 redis的出现&#xff0c;很大程度补偿了memcached这类key-value存储的不足&#xff0c;在部分场合可以对关系数据库起到很好的补充作用。它提供了Python&#xff0c;Ruby&#xff0c;Erlang&#xff0c;PHP客户端&#xff0c;使用很方便。…

Delphi各个版本和发展历史

Delphi&#xff0c;是Windows平台下著名的快速应用程序开发工具(Rapid Application Development&#xff0c;简称RAD)。它的前身&#xff0c;即是DOS时代盛行一时的“BorlandTurbo Pascal”&#xff0c;最早的版本由美国Borland&#xff08;宝兰&#xff09;公司于1995年开发。…

PWN-PRACTICE-BUUCTF-12

PWN-PRACTICE-BUUCTF-12cmcc_simpleroppicoctf_2018_buffer overflow 2babyfengshui_33c3_2016xdctf2015_pwn200cmcc_simplerop 静态编译的32位elf&#xff0c;找一个"int 80h"执行系统调用 前提是利用栈溢出读入字符串"/bin/sh\x00"&#xff0c;然后找po…

C# 基础——C#特性

.NET C# Web开发学习之路——C#特性 C#历史办版本及特性 语言版本发布时间.NET Framework要求Visual版本C# 1.02002.1.NET Framework 1.0Visual Studio .NET 2002C# 1.1\1.22003.4.NET Framework 1.1Visual Studio .NET 2003C# 2.02005.11.NET Framework 2.0Visual Studio 20…

PWN-PRACTICE-BUUCTF-13

PWN-PRACTICE-BUUCTF-13[ZJCTF 2019]Logininndy_ropmrctf2020_shellcodejarvisoj_level1[ZJCTF 2019]Login 参考&#xff1a;ZJCTF 2019 Pwn from pwn import * ioremote(node4.buuoj.cn,27513) #io process("./login") shell 0x400e88 io.recvuntil("user…

同步与异步系列之二 导读目录

.NET 同步与异步 之 EventWaitHandle&#xff08;Event通知&#xff09; &#xff08;十三&#xff09; .NET 同步与异步 之 Mutex &#xff08;十二&#xff09; .NET 同步与异步 之 线程安全的集合 (十一) .NET 同步与异步 之 警惕闭包&#xff08;十&#xff09; .NET 同…

PWN-PRACTICE-BUUCTF-14

PWN-PRACTICE-BUUCTF-14bbys_tu_2016ciscn_2019_n_3roarctf_2019_easy_pwngyctf_2020_borrowstackbbys_tu_2016 栈溢出&#xff0c;覆盖eip到printFlag函数 from pwn import * #ioprocess(./bbys_tu_2016) ioremote(node4.buuoj.cn,27817) elfELF(./bbys_tu_2016) #io.recvun…

.NET 实现并行的几种方式(一)

好久没有更新了&#xff0c;今天来一篇&#xff0c;算是《同步与异步》系列的开篇吧&#xff0c;加油&#xff0c;坚持下去&#xff08;PS:越来越懒了&#xff09;。 一、Thread 利用Thread 可以直接创建和控制线程&#xff0c;在我的认知里它是最古老的技术了。因为out了、所…

PWN-PRACTICE-BUUCTF-15

PWN-PRACTICE-BUUCTF-15axb_2019_fmt32wustctf2020_getshell_2others_babystackpwnable_startaxb_2019_fmt32 格式化字符串漏洞 第一次打印出printf的真实地址&#xff0c;进而计算libc基地址&#xff0c;得到system真实地址 第二次修改got表&#xff0c;使printf的got指向sys…

PWN-PRACTICE-BUUCTF-16

PWN-PRACTICE-BUUCTF-16mrctf2020_easyoverflowhitcontraining_magicheapciscn_2019_s_40ctf_2017_babyheapmrctf2020_easyoverflow 覆盖main函数中的v5&#xff0c;使之为"n0t_r311y_f1g" from pwn import * rremote("node4.buuoj.cn",29521) payloada*…

REVERSE-PRACTICE-BUUCTF-32

REVERSE-PRACTICE-BUUCTF-32[第四章 CTF之APK章]数字壳的传说[第五章 CTF之RE章]Hello, RE[第五章 CTF之RE章]BabyAlgorithm[第五章 CTF之RE章]BabyConst[第五章 CTF之RE章]BabyLib[第五章 CTF之RE章]easy_rust[第五章 CTF之RE章]easy_go[第五章 CTF之RE章]easy_mfc[第四章 CTF…

.NET 实现并行的几种方式(二)

本随笔续接&#xff1a;.NET 实现并行的几种方式&#xff08;一&#xff09; 四、Task 3&#xff09;Task.NET 4.5 中的简易方式 在上篇随笔中&#xff0c;两个Demo使用的是 .NET 4.0 中的方式&#xff0c;代码写起来略显麻烦&#xff0c;这不 .NET 4.5提供了更加简洁的方…

PWN-PRACTICE-BUUCTF-17

PWN-PRACTICE-BUUCTF-17hitcontraining_heapcreatorwustctf2020_closedciscn_2019_es_7hitcon2014_stkofhitcontraining_heapcreator 单字节溢出&#xff0c;修改下一个chunk的size&#xff0c;造成chunk overlap&#xff0c;实现任意地址读写 参考&#xff1a;buuctf hitcont…

redis 和 数据库mysql之间的关系

https://www.zhihu.com/question/20734566 https://www.zhihu.com/question/19660689 http://blog.csdn.net/Ideality_hunter/article/details/77621643 redis和mysql要根据具体业务场景去选型 mysql&#xff1a;数据放在磁盘redis&#xff1a;数据放在内存 redis适合放一些…

PWN-PRACTICE-BUUCTF-18

PWN-PRACTICE-BUUCTF-18ciscn_2019_final_3ciscn_2019_s_9jarvisoj_level5pwnable_hacknoteciscn_2019_final_3 tcache dup 参考&#xff1a;[V&N2020 公开赛]easyTHeap ciscn_2019_final_3 ——heap中tcache的一些简单利用方法 # -*- coding:utf-8 -*- from pwn impor…

GPS/轨迹追踪、轨迹回放、围栏控制

折腾一个多月终于弄完了这个项目&#xff0c;起初都未曾接触GPS/轨迹追踪、轨迹回放、圈划围栏...等一些在百度地图或者Googel地图操作的一些业务&#xff0c;后端的业务相对来说简单点 cas单点登录&#xff0c;mongdb灵活的数据存储方式,ActiveMQ消息推送、Redis存储... 这篇…

PWN-PRACTICE-BUUCTF-19

PWN-PRACTICE-BUUCTF-19hitcontraining_bambooboxpicoctf_2018_shellcodenpuctf_2020_easyheapcmcc_pwnme2hitcontraining_bamboobox unlink&#xff0c;参考&#xff1a;hitcontraining_bamboobox 堆技巧 unlink # -*- coding:utf-8 -*- from pwn import * #ioprocess("…