<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. HDU 1950 Bridging signals （LIS，O(nlogn)）

    题意: 给一个数字序列,要求找到LIS,输出其长度. 思路: 扫一遍+二分,复杂度O(nlogn),空间复杂度O(n). 具体方法:增加一个数组,用d[i]表示长度为 i 的递增子序列的最后一个元素, ...

  2. Stream.iterate方法与UnaryOperator

    前提:本人在翻看<Java核心技术II>的时候在p17的时候发现一段代码不是很明白.不知道为什么就输出了1,2,3,4,5,6,7,8,9,10,...也不知道n-n.add(BigInt ...

  3. 状态压缩---区间dp第一题

    标签: ACM 题目 Gappu has a very busy weekend ahead of him. Because, next weekend is Halloween, and he is ...

  4. UVA 427 The Tower of Babylon 巴比伦塔（dp）

    据说是DAG的dp,可用spfa来做,松弛操作改成变长.注意状态的表示. 影响决策的只有顶部的尺寸,因为尺寸可能很大,所以用立方体的编号和高的编号来表示,然后向尺寸更小的转移就行了. #include ...

  5. ios push Payload

    https://developer.apple.com/library/content/documentation/NetworkingInternet/Conceptual/RemoteNotifi ...

  6. Scrapy-架构

    Scrapy架构(各组件的功能)及Scrapy引擎控制数据流的过程 1. Scrapy架构图(绿线是数据流向): □ Scrapy引擎(Engine):引擎负责控制数据流在系统的所有组件中流动,并在相 ...

  7. 获得stixel的gt数据

    这是论文中的作者博客地址https://sites.google.com/site/danmlevi/ 这是作者现在的博客地址https://sites.google.com/view/danlevi ...

  8. java上传、下载、删除ftp文件

    一共三个类,一个工具类Ftputil.,一个实体类Kmconfig.一个测试类Test 下载地址:http://download.csdn.net/detail/myfmyfmyfmyf/669710 ...

  9. 使用xib开发界面

    使用xib开发界面 2015-02-02 10:03 编辑: suiling 分类:iOS开发 来源:jymn_chen‘s blog   纯代码写界面有时候会降低开发效率,对于一些通用简单的界面,例 ...

  10. c++ 结构体，设置物品体积并输出物品属性

    #include <iostream> using namespace std; struct box { char maker[40]; float height; float widt ...