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.空白 ...
随机推荐
- react 03 组件传值
一 基础 props: 父传子 单向 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css ...
- C++基础复习题(笔试题)
C++基础~for循环:选择,判断 HELLO,亲爱的小朋友! 我们准备 35个选择题,对for循环及之前的内容进行一个简单的复习,快来看一下吧! 顺序&选择结构 1.对于C++中变量的命名规 ...
- python连接数据库系列
1.Python连接MySQL 具体详情参考:MySQL笔记 Python连接MySQL需要借助pymysql,安装pymysql pip install pymysql 1.1 pymysql连接数 ...
- java运算符相关学习
java运算符 面试题1: 计算2*8如何操作效率更高? 剖析: 2 * 8 => 实际上是2 * 2 * 2 * 2 2<<3 System.out.println(2<&l ...
- disabled属性的简介和使用
一.disabled属性的简介和使用 Html中的input元素.button元素.option元素等都具有一个disabled属性. disabled对a标签不起作用当赋予该属性时该元素将变得不可交 ...
- Open vSwitch虚拟交换机实践
实验2:Open vSwitch虚拟交换机实践 (一)基本要求 1.ovs-vsctl基础操作实践: 创建OVS交换机,完成相关要求后查看网络状态与端口信息: 2.使用Mininet搭建的SDN拓扑, ...
- Java Development Kit下载地址
Java Development Kit下载地址 官网下载 一般最新版本无需登录即可下载,其他历史版本需要登录Oracle账户才可以下载. 最新版下载地址: https://www.oracle.co ...
- 069_VisualForce Ajax 更多用法解读02
一.同步调用的异常处理:AJAX Toolkit try catch... <html> <head> <script src="/soap/ajax/44. ...
- QML与python互相通信
解决python与QML的通信问题: QML中直接调用python函数 python发送信号,QML响应信号并进行相应处理 py文件 # This Python file uses the follo ...
- Java集合-练习巩固
练习一 public class H1_Test { public static void main(String[] args) { H1_News h1News = new H1_News(&qu ...