<body>
<div id="a" style="background:#0F0; height:100px; width:100px;">

<div id="c" style="background:#FF0; height:50px; width:50px;">

</div></div>

<div id="b" style="background:#900; height:200px; width:200px;"></div>

</body>
#c{ display:none;}

#b{display:none;}

#a:hover+#b{

   display:block;

        }

#a:hover #c{

    display:block;}

c是a的子元素，使用a控制c的样式时，为 #a:hover #c{}

b是a兄弟元素，使用a控制b的样式时，要用+,为#a:hover+#b{}

需要改变样式一定都要写在css中，如果写在html中，由于在html优先级高，则改变的样式不会改变

ps：:hover为悬浮，即悬浮在a块上时，改变b  c的样式

【前端学习笔记】关于CSS通过一个块改变另一个块的样式的更多相关文章

  1. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  2. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  3. 前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...

  4. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  5. 2、前端学习笔记之——css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 前端学习笔记之CSS浮动浅析

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. 前端学习笔记之CSS知识汇总

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  8. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  9. 前端学习笔记之CSS文档流

    先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...

  10. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. [置顶] IIS应用程序池多工作进程设置及Session共享

    [置顶] IIS应用程序池多工作进程设置及Session共享   在调优iis的时候,朋友分享给我一个特别棒的设置方法步骤,感谢好朋友的分享. IIS应用程序池多工作进程设置及Session共享 1  ...

  2. 使用xcode workspace 多个project协同工作

    一般的某个应用单独新建一个 project 就可以了,然后把所有的程序文件都放在里面,这个可以满足大部分普通的需求,但是有时候,项目有可能要使用其他的项目文件,或者引入其他的静态库文件,这个时候 wo ...

  3. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  4. P2261 bzoj1257 [CQOI2007]余数求和

    一道数论分块首先这类的求和写一下公式∑n%i=∑n-i*(n/i)= ∑n-∑i*(n/i) 前面的好求所以 ans=nk+∑k*(k/i);于是进行分块这里总结一下只要出现除法∑就进行分块由阿尔贝和 ...

  5. 使用Spring AOP实现业务依赖解耦

    Spring IOC用于解决对象依赖之间的解耦,而Spring AOP则用于解决业务依赖之间的解耦: 统一在一个地方定义[通用功能],通过声明的方式定义这些通用的功能以何种[方式][织入]到某些[特定 ...

  6. mysqldump导出备份数据库报Table ‘performance_schema.session_variables‘ doesn‘t exist

    今天在bash进行本地数据库往云端数据库导数据的时候,在本地导出.sql文件这第一步就出现了错误问题,导出sql文件的命令: mysqldump -u 用户名 -p 数据库名 > xxx.sql ...

  7. （5）zabbix配置详解

    zabbix配置介绍 zabbix配置内容比较多,我们要分为9大块来讲解.分别如下:1.主机与组不用多数,顾名思义,他是添加主机配置与组配置. 2.监控项需要监控的项目,例如服务器负载可以使一个监控项 ...

  8. Centos7下安装iptables防火墙

    说明:centos7默认使用的firewalld防火墙,由于习惯使用iptables做防火墙,所以在安装好centos7系统后,会将默认的firewall关闭,并另安装iptables进行防火墙规则设 ...

  9. ClientAbortException:java.io.IOException解决方案

    org.apache.catalina.connector Class ClientAbortException java.lang.Object java.lang.Throwable java.l ...

  10. 《嵌入式linux应用程序开发标准教程》笔记——7.进程控制开发

    进程是系统资源的最小单元,很重要. 7.1 linux进程的基本概念 定义:一个程序的一次执行过程,同时也是资源分配的最小单元.程序是静态的,而进程是动态的. 进程控制块:linux系统用进程控制块描 ...