<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. Android的Activity之间传对象的方法

    传值代码块 //Serializeable传递对象的方法 public void SerializeMethod(){ Person mPerson = new Person(); mPerson.s ...

  2. HDU 4341 Gold miner （分组背包）

    先把线按照距离原点的距离排序,然后用叉积把在同一条直线上的点放在一起, 把在同一条线上的点中的前i个点当成一个点就转化成了分组背包. 写if(kas++) putchar('\n') 居然PE了,PE ...

  3. UVA 1220 Party at Hali-Bula (树形DP)

    求一棵数的最大独立集结点个数并判断方案是否唯一. dp[i][j]表示以i为根的子树的最大独立集,j的取值为选和不选. 决策: 当选择i时,就不能选择它的子结点. 当不选i时,它的子结点可选可不选. ...

  4. CS 分解

    将学习到什么 CS 分解是分划的酉矩阵在分划的酉等价之下的标准型. 它的证明涉及奇异值分解.QR 分解以及一个简单习题.   一个直观的习题 设 \(\Gamma, L \in M_p\). 假设 \ ...

  5. CPP-基础：strcpy之于C++(

    以下对strcpy函数错误的是? char atr1[]="string"; ]; char *str3; char *str4="sting"; A.strc ...

  6. Linux文件系统概述二

    VFS-目录项对象(dentry) 每个文件除了有一个索引节点 inode 数据结构外,还有一个目录项 dentry 数据结构 dentry 结构代表的是逻辑意义上的文件,描述的是文件逻辑上的属性,目 ...

  7. Zynq UltraScale+ MPSoC 多媒体应用

    消费者渴望更高的视频质量,推动了视频技术的发展.MPSoC 基于 Zynq-7000SoC ,包括一个可编程逻辑 (PL) 的桥接处理系统 (PS),但它在 Zynq UltraScale+ MPSo ...

  8. Tarjan求强联通分量+缩点

    提到Tarjan算法就不得不提一提Tarjan这位老人家 Robert Tarjan,计算机科学家,以LCA.强连通分量等算法闻名.他拥有丰富的商业工作经验,1985年开始任教于普林斯顿大学.Tarj ...

  9. shell脚本，判断给出的字符串是否相等。

    第一种方法[root@localhost wyb]# .sh #!/bin/bash #判断给出的字符串是否相等 read -p "Please Input a number:" ...

  10. 51nod——1174 区间中最大的数（ST）

    题目链接 给出一个有N个数的序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有数中,最大的数是多少. 例如: 1 7 6 3 1.i = 1, j = 3,对应的数为7 6 3,最大的数 ...