css代码中的2个类名连一起写是啥意思?
<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个类名连一起写是啥意思?的更多相关文章
- grunt-css-sprite css 代码中的切片合并
安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...
- gulp-css-spriter 将css代码中的切片图片合并成雪碧图
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), ...
- JAVA代码中可使用中文类名,变量名,对象名,方法名.
java程序 兔子 public class 兔子{ //构造方法 public 兔子(){} public void 吃草(){ System.out.println("兔子在吃草&quo ...
- 如何写出优雅的CSS代码 ?(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ?
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- 一行css代码搞定响应式布局
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...
- CSS代码重构与优化之路
作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...
- CSS代码重构
CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...
- 精简CSS代码
精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...
- 初始化css代码需要注意的
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-06) 写在所有css代码之前,对网页中所有同类元素的一个样式规则代码或者一些基础性公用元素的样式规则代码. 1.空白 ...
随机推荐
- Python 常用笔记
记录 http://blog.sina.com.cn/s/blog_73b339390102yoio.html PE:市盈率 = 股价 / 每股盈利 PEG:(市盈率相对盈利增长比率/市盈增长比率) ...
- 【C学习笔记】day5-3 编写代码模拟三次密码输入的场景
3.编写代码模拟三次密码输入的场景. 最多能输入三次密码,密码正确,提示"登录成功",密码错误, 可以重新输入,最多输入三次.三次均错,则提示退出程序. #define _CRT_ ...
- class和struct区别
类(class) 引用类型:将一个对象赋值给另一个对象时,系统不会对此对象进行拷贝,而会将指向这个对象的指针赋值给另一个对象,当修改其中一个对象的值时,另一个对象的值会随之改变. 结构体(struct ...
- tool/js - ChineseToPinyin 汉语转拼音
tool/js - ChineseToPinyin 汉语转拼音 Convert_Pinyin.js js如何简单实现汉字转成拼音的功能 pinyin-pro 官网 npm npm 安装 npm ins ...
- RabbitMQ-01-使用Java进行简单消息发送与接收
前言 这里使用手动管理jar与使用Maven管理jar两种方式,分别演示消息的发送和接收. 手动管理jar实现消息发送与接收 添加jar amqp-client-5.7.1.jar slf4j-api ...
- 配置python库源为清华源
目录 Windows Ubuntu pip较低版本 pip较高版本 Windows %HOMEPATH%/pip/pip.ini [global] index-url = https://pypi.t ...
- 【Linux】常用
查看端口占用 yum install lsof lsof -i:8080:查看8080端口占用 lsof abc.txt:显示开启文件abc.txt的进程 lsof -c abc:显示abc进程现在打 ...
- CentOS7桥接网络设置(小白向)
配置过程 查看网卡设备名:输入ifconfig 可以看到网卡设备名是ens32 注:不同版本网卡设备名是不一样的 进入到默认文件路径,输入:cd /etc/sysconfig/network-scri ...
- Flink1.11 解决 No ExecutorFactory found to execute the application
在使用Flink1.11的时候写了个本地Test 运行的时候发现报错了,具体如下 Exception in thread "main" java.lang.IllegalState ...
- Linux配置文件和网络常用命令总结
Linux应用配置大全 Linux网络基本配置 最小化安装的话是没有ifconfig命令的需要使用yum search ifconfig查找,然后yum install net-tools.x86_6 ...