<div class="menu-btn closed">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
.menu-btn.closed .menu-line:nth-child(1){
transform:translateY(15px) rotate(45deg);
}
.menu-btn.closed .menu-line:nth-child(2){
opacity: 0;
}
.menu-btn.closed .menu-line:nth-child(3){
transform:translateY(-15px) rotate(-45deg);
}

观察下面这段css的“closed”这个类名,它现在和menu-btn连在一起写,中间没写空格,意思是,如果menu-btn这个类旁边有closed这个类,那么它后面的内容就生效

比如这个时候<div class="menu-btn closed">就是生效的

如果是<div class="menu-btn">,这个时候menu-btn这个类旁边没有“closed”,那它就不生效。

css代码中的2个类名连一起写是啥意思?的更多相关文章

  1. grunt-css-sprite css 代码中的切片合并

    安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...

  2. gulp-css-spriter 将css代码中的切片图片合并成雪碧图

    NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     ...

  3. JAVA代码中可使用中文类名,变量名,对象名,方法名.

    java程序 兔子 public class 兔子{ //构造方法 public 兔子(){} public void 吃草(){ System.out.println("兔子在吃草&quo ...

  4. 如何写出优雅的CSS代码 ?(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  5. 如何写出优雅的css代码 ?

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  6. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  7. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  8. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

  9. 精简CSS代码

    精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...

  10. 初始化css代码需要注意的

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白 ...

随机推荐

  1. How to present a paper 怎么讲好一篇文献

    Author : 如果在冬夜一个旅人 Date : 2022/05/24 目录 背景说明 1 读文献 1.1 读文献的层次 1.2 论文阅读的首轮次序 2 讲文献 2.1 The Problem to ...

  2. 谷歌浏览器console.log打印失效问题

    什么都没干,谷歌浏览器console.log就失效了,百度说如下图就能打印了,该勾选的勾选了,就是打印无效 后来发现是眼睛边上的那个输入框将打印的内容给过滤掉了,将输入框中的内容删掉就好了 Filte ...

  3. Java面向对象之接口的定义与实现

    接口 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法.专业的约束!约束和实现分离:面向接口编程 接口就是规范,定义的是一组规则,体现了现实世界中&quo ...

  4. element-ui upload自定义formdata上传文件和参数

      <el-upload list-type="text" action="" :http-request="HandleHttpRequest ...

  5. express的使用:数据库相关(三)

    1.定义:用来组织,存储和管理数据的仓库 2.分类 a.MySQL(最广泛,流行度最高,community+enterprise),关系数据库,SQL数据库 b.Oracle (收费),关系数据库,S ...

  6. Kubernetes 设置master相关

    设置master调度命令 1.设置master一般情况下不接受pod调度 sudo kubectl taint nodes master node-role.kubernetes.io/master= ...

  7. flink sql任务出现java.lang.OutOfMemoryError: Metaspace

    线上任务一直出现以下错误导致一直重启,然后一直因为这个错误挂掉 org.apache.flink.shaded.guava18.com.google.common.util.concurrent.Ex ...

  8. 【闲话】Vscode+PlatformIO+esp-idf+esp32物联网开发小记之环境搭建

    Vscode作为一款优秀的代码编辑器,具有极为方便快捷的代码辅助与拓展功能,使用熟练后开发效率大大提高,且作为典型的IDE,不需要花费大量的时间成本即可上手,Vscode结合各种插件,可以搭建出大部分 ...

  9. 分享: 第二性 合卷本 竖本.PDF

    书本详情 第二性台版 作者: 西蒙.德.波娃(Simone de Beauvoir)出版社: 貓頭鷹原作名: Le Deuxième Sexe译者: 邱瑞鑾出版年: 2013-10页数: 1136装帧 ...

  10. lua 调用C函数

    #include "tolua_fix.h" #include "WordFilter.h" #include "LuaBasicConversion ...